jQuery关闭/打开多个切换 [英] Jquery Close/Open Multiple Toggles
问题描述
我的菜单中有一个切换开关,可以成功使用其中的两个链接.因为一次切换的顶部链接覆盖了另一个链接,所以没有问题.但是由于它下面的链接使顶部链接暴露在外,因此用户可以单击它,并且现在打开了两个切换项,并且彼此之间几乎堆叠在一起.有没有办法让我检查另一个切换项是否打开,如果打开,则将其关闭?谢谢!
I have the toggle in my menu Working successfully for the two links that I have within it. Because the top link once toggled covers the other link, there is no problem. But since the link beneath it leaves the top link exposed, a user could click that and now have two toggled items open and pretty much stacked on top of each other. Is there a way for me to check if the other toggled item is open and if so, close it? Thanks!
<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>
推荐答案
您可以略微调整jQuery,因为所有切换菜单上都已经有一个menu-toggle
类,只需隐藏那些不是您想要的ID即可在您的点击处理程序中,如下所示:
You can adjust your jQuery slightly, since you already have a menu-toggle
class on all the toggle menus, just hide those that aren't the ID you want in your click handler, like this:
$("#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();
});
如果需要的话,由于菜单具有一致的布局,因此您可以使用一键式处理程序来查找相对于链接的切换div,而无需匹配ID,例如:
Further, if you want, since your menus have a consistent layout, you can have one click handler that finds the toggle div relative to the link, no need for matching IDs, like this:
$(".parents-toggle > a").click(function () {
$("div.menu-toggle").not($(this).siblings()).hide();
$(this).siblings(".menu-toggle").toggle();
});
最后,如果您需要一些动画,则可以使用 .slideUp()
和 .slideToggle()
,如下所示:
And lastly, if you want a bit of animation, you can easily add it using .slideUp()
and .slideToggle()
, like this:
$(".parents-toggle > a").click(function () {
$("div.menu-toggle").not($(this).siblings()).slideUp();
$(this).siblings(".menu-toggle").slideToggle();
});
这篇关于jQuery关闭/打开多个切换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!