jQuery切换菜单隐藏/显示(打开新菜单时关闭其他菜单)

Question

感谢尼克克拉弗,我有一个很好的切换菜单,但是我想出了一个问题,如果用户不断点击新菜单,页面将继续增长,我不想要,所以这个想法是:

当一个菜单打开时,任何当前打开的菜单将关闭.

完整的来源是@ http://the-dot.co.uk/new/

这里是我正在使用的代码的2个片段.

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

谢谢.

Answer 1

你可以这样做:

$(function() {
  $("ul li a").click(function() { 
      $(this).parent().next().toggle("fast").siblings("[id]").hide("fast");
  });
});

你可以在这里测试一下,它是什么让它切换兄弟<li>仍然,但然后看它 .siblings()有ID属性和.hide()它们如果显示.

如果没有锁定标记,您可以进一步简化它,如下所示:

<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");
  });
});

这是一个偏好的问题,但我发现这种方法更清洁,更具风格,请查看结果.