css - 从原来的位置扩展 div 以适应屏幕

Question

这是我目前得到的:http://jsfiddle.net/xj4hb2kt/4/

   .expandable
    {
        position: fixed;
        width: 100px;
        height: 80px;
        background-color: black;
        -webkit-transition: all 1200ms ease-in-out;
        -moz-transition: all 1200ms ease-in-out;
        -o-transition: all 1200ms ease-in-out;
        top: 60px;
        left: 100px;
    }

    .expandable-expanded
    {
        position: fixed;
        width: 100%;
        height: 100%;
        -webkit-transform: scale(100%);
        transform: scale(100%);
        z-index: 5;
        top: 0px;
        left: 0px;
    }

一切正常，除了我不能为“可扩展”类使用“固定”位置。有没有办法在不将“消耗性”位置设置为固定的情况下执行此操作？谢谢!

Answer 1

试试这个 CSS

  .expandable-expanded
        {
            top:0px;
            left:0px;
            position: fixed;
            width: 100%;
            height: 100%;
            -webkit-transform: scale(100%);
            transform: scale(100%);
            z-index: 5;
        }

和这个 jquery

$('.expandable').click(function () {
    var self = $(this);
    $(this).css('top',$(this).position().top);
    $(this).css('left',$(this).position().left);
    setTimeout(function(){
        self.toggleClass('expandable-expanded');
        self.css('top',0);
        self.css('left',0);
    },100);
});

是否如你所愿？ http://jsfiddle.net/xng4pao6/1/