Javascript Jquery，打开关闭滑块问题

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

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


        });

---

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

打开侧栏并检查是否存在此类时，也可以将类添加到侧栏，而不是变量。您可以通过jQuery的.addClass（）方法实现这一点

示例：

在javascript代码中，创建变量（根据需要命名）：

然后编辑隐藏/显示面板的功能：

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

---

你能提供一个提琴吗？@markvicencio抱歉，代码太复杂了，所以我无法添加一个示例，但我无法尝试，因为我没有你的完整代码。让我知道它是否有效。如果它不起作用，如果你能提供一把小提琴，那会很有帮助的。当然，我会尽力的。谢谢，它起作用了。非常感谢，这对我很有帮助。正是我想要的。

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