jQuery 切换菜单隐藏/显示(当新菜单打开时关闭其他菜单) [英] jQuery toggle menu hide/show (close other menus when new menu opens)
问题描述
感谢 Nick Craver 我有一个不错的切换菜单,但是我提出了一个问题,如果用户不断点击新菜单,页面将继续增长,这是我不想要的,所以这个想法是:
thanks to Nick Craver I've got a nice toggle menu going, however i've come up with the problem that if users keep clicking new menus the page will keep growing which i dont want, so the idea is:
打开一个菜单时,关闭当前打开的任何菜单.
as one menu opens, any currently open menus to close.
完整来源是@http://the-dot.co.uk/new/
这是我正在使用的代码的 2 个片段.
here are 2 snippets of the code I'm using.
<script type="text/javascript">
$(document).ready(function() {
$("ul li a").click(function() { $(this).parent().next().toggle("fast"); });
});
</script>
和html结构是
<ul class="navigation">
<li><a name="us" title="us">Us</a></li>
<li id="us">about thedot</li>
<li><a name="portfolio" title="portfolio">Portfolio</a></li>
<li></li>
<li><a name="contact" title="contact">Contact</a></li>
<li id="contact">contact deets
</li>
<li><a name="twitter" title="twitter">Twitter</a></li>
<li id="twit">some twitter shit</li>
<li><a href="#">Blog</a></li>
</ul>
谢谢.
推荐答案
你可以这样做:
$(function() {
$("ul li a").click(function() {
$(this).parent().next().toggle("fast").siblings("[id]").hide("fast");
});
});
你可以在这里测试,这是什么切换兄弟<li>
仍然存在,但随后会查看 its .具有 ID 属性和
代码> 如果显示它们..hide()
的兄弟姐妹()
You can test it out here, what this does it toggle the sibling <li>
still, but then looks at its .siblings()
that have an ID attribute and .hide()
them if show.
如果标记没有被锁定,您可以像这样进一步简化:
If the markup isn't locked in, you could simplify it further like this:
<ul class="navigation">
<li class="toggle">Us</li>
<li class="content">about thedot</li>
<li class="toggle">Portfolio</li>
<li class="content"></li>
<li class="toggle">Contact</li>
<li class="content">contact deets</li>
<li class="toggle">Twitter</li>
<li class="content">some twitter shit</li>
<li><a href="#">Blog</a></li>
</ul>
和这样的脚本:
$(function() {
$("li.content").hide();
$("ul.navigation").delegate("li.toggle", "click", function() {
$(this).next().toggle("fast").siblings(".content").hide("fast");
});
});
这是一个偏好问题,但我发现这种方法更简洁、更时尚,在此处查看结果.
It's a matter of preference, but I find this approach a bit cleaner and more style-able, check out the result here.
这篇关于jQuery 切换菜单隐藏/显示(当新菜单打开时关闭其他菜单)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!