Question

我在菜单中切换了我在其中的两个链接成功运行。因为顶部链接一旦切换覆盖另一个链接，就没有问题。但由于它下面的链接使顶部链接暴露，用户可以点击它，现在有两个切换的项目打开并且几乎堆叠在彼此之上。有没有办法让我检查另一个切换项目是否打开，如果是，请关闭它？谢谢！

<div class="parents-toggle">
 <a href="#" id="customize-toggle">Customize</a><br/>
 <div class="menu-toggle hidden" id="customize-menu">
 <div class="menu-toggle-one">
 <h3>Background</h3>
  <ul>
   <li><a href="#">Dark Wood</a></li>
   <li><a href="#">Wallpaper</a></li>
   <li><a href="#">Bricks</a></li>
   <li><a href="#">Planks</a></li>
   <li><a href="#">Default</a></li>
 </ul>
</div>     
<div class="menu-toggle-two">
 <h3>Layout</h3>
 <ul>
  <li><a href="#">Grid</a></li>
  <li><a href="#">List</a></li>
  <li><a href="#">Full</a></li>
 </ul>
</div>
</div>
</div>
<a href="/submit/">Submit video</a><br/>
<div class="parents-toggle">
 <a href="#" id="channels-toggle">Channels</a>
 <div class="menu-toggle hidden" id="channels-menu">
  <div class="menu-toggle-one">
  <ul>
   <li><a href="#">Automotive</a></li>
   <li><a href="#">Comedy</a></li>
   <li><a href="#">Movies</a></li>
   <li><a href="#">Weather</a></li>
  </ul>
 </div>
 <div class="menu-toggle-two">
  <ul>
   <li><a href="#">Business</a></li>
   <li><a href="#">Commercials</a></li>
   <li><a href="#">Music</a></li>
   <li><a href="#">Technology</a></li>
  </ul>
 </div>
</div>
</div>
</div>

<script>
 $("#customize-toggle").click(function () {
 $("#customize-menu").toggle();
 });
 $("#channels-toggle").click(function () {
 $("#channels-menu").toggle();
 });
</script>

Answer 1

您可以稍微调整jQuery，因为您已经在所有切换菜单上都有menu-toggle类，只需隐藏那些不是您在点击处理程序中所需的ID，如下所示：

$("#customize-toggle").click(function () {
   $(".menu-toggle:not(#customize-menu)").hide();
   $("#customize-menu").toggle();
});
$("#channels-toggle").click(function () {
   $(".menu-toggle:not(#channels-menu)").hide();
   $("#channels-menu").toggle();
});

You can see a demo here

此外，如果您愿意，由于您的菜单具有一致的布局，您可以使用一个单击处理程序找到相对于链接的切换div，无需匹配ID，如下所示：

$(".parents-toggle > a").click(function () {
   $("div.menu-toggle").not($(this).siblings()).hide();
   $(this).siblings(".menu-toggle").toggle();
});

You can see a demo of that here

最后，如果您想要一些动画，可以使用.slideUp()和.slideToggle()轻松添加动画，如下所示：

$(".parents-toggle > a").click(function () {
   $("div.menu-toggle").not($(this).siblings()).slideUp();
   $(this).siblings(".menu-toggle").slideToggle();
});

You can see that here :)

Answer 2

我在我的网站上做的是我在body元素中添加了一个事件处理程序，我将其用作一个全能，检查菜单是否打开，如果是，则关闭它。 / p>

Jquery关闭/打开多个切换

2 个答案: