我有两个边栏(滑块),如下图所示。
当点击btn1时,侧板1打开。当我点击btn2侧面板2打开。这没关系。现在,当我点击btn1,如果侧板2打开,那么它将关闭,侧板1打开,侧板1的btn2也一样。这也没关系,工作很好。现在我不想添加关闭btn。所以我决定,如果侧板1打开,我点击btn1,它应该关闭。我试了很多东西,但对我不起作用。
HTML格式
<div class="demo">
<div class="demo-box">
<div class="demo-buttons iconbar" > <img src="images/btn_overly.jpg" width="30" height="30" border="0" alt="" class = "sidemenushow1"> <img src="images/btn_factfile.jpg" width="30" height="30" border="0" alt="" class = "sidemenushow2"> </div>
<div class="demo-box-panel sidepanel1 " id="sidepanel1" ><!-- style = "-webkit-overflow-scrolling: touch; overflow: scroll;" -->
<div id="scroll" style="height: 100%;">
<div>
<div class = "btnclose sidemenuhide1"> <img src="images/close.png" width="26" height="26" border="0" alt=""> </div>
<div class = "btnhead ">
<h3>Title</h3>
</div>
<div class="pageContent">
test
</div>
</div>
</div>
</div>
<div class="demo-box-panel sidepanel2" id="sidepanel2">
<div class = "btnclose sidemenuhide2"> <img src="images/close.png" width="26" height="26" border="0" alt=""> </div>
<div id="" style = "height:100%;">
<div>
test
</div>
</div>
</div>
</div>
</div>
CSS
/*@import url("../vendor/yui-cssreset.css");
@import url("./generic.css");*/
.demo a{cursor:pointer;color:white;display:block;}
/*.demo a:hover{text-decoration:underline}*/
.demo .demo-box{width:250px;height:700px;position:absolute;margin:0;padding:0;text-align:center; right:-1px; top:5px;}
.demo .demo-box .slidescrollpanel-wrap{ }
.demo .demo-box .slidescrollpanel-content{text-align:left;border:1px solid #000;background:#313831;position:relative;}
.demo .demo-box .slidescrollpanel-content pre > code{}
.demo .demo-box .demo-buttons{margin-top:25px; height:100%}
.demo .demo-box .demo-buttons button{margin:.5em;width:150px;max-width:40%}
.navtitle{cursor:pointer;color:white;display:block;height:30px;}
滑动分页
$(function(){
var $panel1 = $('.sidepanel1').slideScrollPanel({
direction: 'right'
});
$('.sidemenushow1').click(function(){
$panel2.data('slidescrollpanel').hidePanel();
$panel1.data('slidescrollpanel').showPanel();
});
$('.sidemenuhide1').click(function(){
$panel1.data('slidescrollpanel').hidePanel();
});
var $panel2 = $('.sidepanel2').slideScrollPanel({
direction: 'right'
});
$('.sidemenushow2').click(function(){
$panel1.data('slidescrollpanel').hidePanel();
$panel2.data('slidescrollpanel').showPanel();
});
$('.sidemenuhide2').click(function(){
$panel2.data('slidescrollpanel').hidePanel();
});
});
最佳答案
您可以为每个侧边栏创建一个变量,指示它是打开的还是关闭的,并在每次操作时更新它们。然后每次按下其中一个按钮,检查窗格是否已打开。如果是,关闭它。如果没有,打开它。
当您打开一个类并检查它是否存在时,您也可以将它添加到侧栏,而不是变量。您可以通过jQuery的.addClass()方法来实现。
例子:
在javascript代码中,创建变量(根据需要命名):
var isPanel1Open = false;
var isPanel2Open = false;
然后编辑隐藏/显示面板的函数:
$('.sidemenushow1').click(function(){
$panel2.data('slidescrollpanel').hidePanel();
isPanel2Open = false;
if (isPanel1Open){
$panel1.data('slidescrollpanel').hidePanel();
isPanel1Open = false;
} else {
$panel1.data('slidescrollpanel').showPanel();
isPanel1Open = true;
}
});
$('.sidemenushow2').click(function(){
$panel1.data('slidescrollpanel').hidePanel();
isPanel1Open = false;
if (isPanel2Open){
$panel2.data('slidescrollpanel').hidePanel();
isPanel2Open = false;
} else {
$panel2.data('slidescrollpanel').showPanel();
isPanel2Open = true;
}
});