Javascript jQuery滑块问题-无法正确关闭

我将用功能来分解这些问题-

如果单击打开（阶段1），然后单击打开更多（阶段2），然后单击关闭-打开更多（阶段2）保持打开状态。但是，如果您单击“打开更多”（第2阶段），然后单击“打开更多”（第3阶段），然后单击“关闭”，它们都会正确关闭。为什么会这样

“打开的图片”无法正确关闭。此外，如果您打开了“打开更多（第2阶段）”和“打开更多（第3阶段）”，则当您单击“打开的图片”时，它们应关闭。但事实并非如此

我对jquery是如此的陌生，这一切都非常令人困惑

$(document).ready(function() {
  $('.stage1').hide();  
    $("#stage1").click(function () {
      $(".stage1").toggle("slide", { direction: "right" }, 1000);
    });
    $('.stage2').hide();  
      $("#stage2").click(function () {
        $(".stage2").slideToggle();
        e.preventDefault();
      });
      $('.stage3').hide();  
      $("#stage3").click(function () {
        $(".stage3").slideToggle();
        e.preventDefault();
      });
    $('.photos').hide();  
      $("#photos").click(function () {
        $(".photos").slideToggle();
        e.preventDefault();
      });
         $("#showmap").click(function () {
          if ($('.stage2, .stage3').is(':hidden'))
             {$(".stage1").toggle("slide", { direction: "right" }, 1000); }
             else
             {
              $(".stage3").slideToggle();
              $(".stage2").slideToggle();
              $(".stage1").delay(1000).toggle("slide", { direction: "right" }, 1000);
             }
        });
}); 

-----------------------------HTML-----------------------------

<div id="stage1">Open</div>      
<div id="showmap">close (closes all)</div>
<div class="map-wrapper">

<img src="http://placehold.it/1000x300" width="100%">
<div class="stage1 map-main-slider">   <br>
<div id="stage2">open more</div>
<div id="photos"> Open Pictures (Should close stages 2 and 3 if open) </div>
</div>
</div>
<div>
</div>
<div class="photos" style="color:#FFFFFF;font-size:14px;text-align:center;">
<div> <br> <br> <br> I am Photos <br> <br> <br>  </div>
</div>
<div class="stage2" style="color:#FFFFFF;font-size:14px;text-align:center;">
<div id="stage3"> <br> <br> <br> Open More <br> <br> <br>  </div>
<div class="stage3" style="color:#FFFFFF;font-size:14px;text-align:center;"><br> <br> <br>I am More Infmation <br> <br> <br> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

---

在Showmap中，如果检查不正确，请单击函数检查初始值。我已经修改如下代码

$("#showmap").click(function () {
      if ($('.stage2').is(':hidden') && $('.stage3').is(':hidden'))
         {
             $(".stage1").toggle("slide", { direction: "right" }, 1000); }
         else
         {
          $(".stage3").slideToggle();
          $(".stage2").slideToggle();
          $(".stage1").delay(1000).toggle("slide", { direction: "right" }, 1000);
         }
    });

请拉小提琴

---

感谢

一件事，

e.preventDefault（）

没有被正确使用，这里看起来也不需要它。当我没有它的时候-开关不能正常工作（它不是平滑的，它闪烁）你有

id

\stage1和

类
.stage1
。从技术上讲，这没什么错，但在两个不同的事物上使用相同的名称可能会让人困惑。这会抛出一个错误@AnthonyA。检查控制台。
e.preventDefault（）
与您的故障无关。。。。由于编程错误，这里甚至没有使用它。请参阅控制台。如果OP希望“全部关闭”来关闭所有内容。是的，它需要按顺序关闭所有打开的内容。Hi Sparky我已按照您的指定进一步更改了小提琴。请检查nw。Hi Anthony，我已更新。我不确定它是否按打开的顺序关闭。非常接近你能不能让第三阶段和第二阶段在照片打开之前关闭，这样它们就不会同时打开和关闭？
$("#showmap").click(function () {
      if ($('.stage2').is(':hidden') && $('.stage3').is(':hidden'))
         {
             $(".stage1").toggle("slide", { direction: "right" }, 1000); }
         else
         {
          $(".stage3").slideToggle();
          $(".stage2").slideToggle();
          $(".stage1").delay(1000).toggle("slide", { direction: "right" }, 1000);
         }
    });