Question

我正在尝试构建一个界面，当你点击一个按钮时，一个完整大小的div以及它的所有内容填满了整个屏幕。有两个滑动div，它以一种方式工作，但另一种方式div在第一个div下滑动。

我试图使用切换 - 并切换到增加DIVS宽度属性以接管屏幕的css。

有没有办法实现这个目标？这是我的代码和底部的小提琴：

HTML：

<div class="container">
<div class="left">
<div class="one">
<a href="#"><div class="openone">
<div class="vertical-text-one">OPEN ONE</div>
 </div></a>
ONE</div></div>
<div class="right">
<div class="two">
<a href="#"><div class="opentwo">
<div class="vertical-text-two">OPEN TWO</div>
</div></a>TWO
</div></div>
<div class="header" >
TOP
</div>
</div>

使用Javascript：

$(document).ready(function(){

$('.openone').click(function(e){
$('.left').toggleClass('clicked');
});
$('.opentwo').click(function(e){
$('.right').toggleClass('clicked');
});
});

CSS片段：

.left{
background-color: #06C;
width:50%;
height: 100%;
overflow:hidden;
float:left;
z-index: 1;
transition: width 1s;

}
.left.clicked {
width: 98%; 
background-color: #06C;
z-index: 100;

}
.right{
background-color: #3AD;
float:right;
width:50%;
height: 100%;
z-index: 1;
transition: width 1s;
}
.right.clicked {
width: 98%;
background-color: #3AD;
z-index: 100;
overflow: hidden;
}
.two{
position:absolute;
top: 110px; 
}
.one{
position:absolute;
top: 110px;
}
.openone {
position: relative;
height: 50%;
width:200px;
background-color: #06C;
left: 101%;
}

.opentwo {
position: relative;
height: 50%;
width:200px;
background-color: #3AD;
left: 0px;
}

http://jsfiddle.net/hmyLrzta/19/

Answer 1

只需扩展您的编码：

$(document).ready(function(){

    $('.openone').click(function(e){
        $('.left').toggleClass('clicked');
        $('.right').toggleClass('hidden');
    });
    $('.opentwo').click(function(e){
        $('.right').toggleClass('clicked');
        $('.left').toggleClass('hidden');
    });
});

CSS：

.hidden {
    display: none;
}

这将使用display: none;

呈现不活动的面板

http://jsfiddle.net/hmyLrzta/21/

按钮激活的div滑块下移而不是结束

1 个答案: