Jquery关闭/打开多个切换

我在我的菜单中切换成功为我在其中的两个链接工作。由于顶部链接一旦切换到另一个链接，就没有问题了。但是由于它下面的链接使顶部链接暴露，用户可以点击该链接，现在有两个打开的项目打开并且几乎堆叠在一起。有没有办法让我检查另一个切换的项目是否打开，如果是，关闭它？谢谢！Jquery关闭/打开多个切换

<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>

来源

2010-05-15 Pedro

，可以稍微调整了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 :)

来源

2010-05-15 06:46:18

这太好了！谢谢您的帮助。 – Pedro 2010-05-15 12:50:03

尼克，是否有任何理由为什么这在FF中工作得很好，但在Chrome或Safari中，事件不会触发，菜单也不会打开。当我看着你的演示，他们在所有的浏览器中工作正常，但我没有在那里有任何不同。有什么想法吗？谢谢！ – Pedro 2010-05-15 13:15:54

@Pedro - 确保你的代码被包装在'document.ready'中，像这样：'$（function（）{...答案代码在这里...}）;'所以它在元素准备好后运行。 – 2010-05-15 13:21:23

我做我的网站上为我添加了一个事件处理程序的主体元素，而我使用的是作为一个包罗万象的，要检查是否打开菜单，然后如果是，关闭它。

来源

2010-05-15 02:43:32

Jquery关闭/打开多个切换

回答

相关问题