Jquery，Open Close Slider Issue

Question

我有两个侧边栏（滑块），如下图所示。 点击 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;}

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

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

当您打开侧栏并检查是否存在此类时，您还可以在侧栏中添加一个类而不是变量。你可以通过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;
    }
});