javascript - Jquery，打开关闭 slider 问题

Question

我有两个侧边栏( slider )，如下图所示。 当点击 btn1 时，侧面板 1 打开。当我单击 btn2 侧面板 2 打开时。还行吧。现在，当我单击 btn1 时，如果侧面板 2 打开，那么它会关闭，侧面板 1 打开，侧面板 1 的 btn2 也是如此。这也是好的，工作正常。现在我不想添加关闭按钮。所以我决定，如果侧面板 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;}

Jquery

$(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();
            });


        });

Answer 1

您可以为每个侧边栏创建一个变量，指示它是打开还是关闭，并在每个操作时更新它们。然后，每次按下这些按钮之一时，请检查该 Pane 是否已打开。如果是，请将其关闭。如果没有，请打开它。

除了变量之外，您还可以在打开侧边栏时添加一个类，并检查该类是否存在。您可以通过 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;
    }
});