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>仍然，但然后查看其 .siblings() 并 .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屋！