Jquery切换关闭其他容器

我使用Jquery切换方法根据用户将单击的链接显示div

我唯一想更改的是，当单击另一个菜单时，关闭其他菜单。因此，一次只能打开一个菜单。有人能告诉我实现这一点最直接的方法吗

Jquery
$(document).ready(function() {
    $('#homeMenu').click(function() {
            $('#menu1').slideToggle("fast");
    });
        $('#shopMenu').click(function() {
            $('#menu2').slideToggle("fast");
    });
    $('#faqMenu').click(function() {
            $('#menu3').slideToggle("fast");
    });
});

HTML

这是菜单一
这是菜单二
这是菜单三

可能要将div放入容器中：

<div>
  <div id="menu1" style="display:none;">This is menu one</div>
  <div id="menu2" style="display:none;">This is menu two</div>
  <div id="menu3" style="display:none;">This is menu three</div>
</div>

---

您可以手动滑动其他容器

 var menus = ['#menu1', '#menu2', '#menu3']

    $('#homeMenu').click(function() {
            $('#menu1').slideToggle("fast");
            $(menus.join(',').replace('#menu1')).slideUp();
    });
        $('#shopMenu').click(function() {
            $('#menu2').slideToggle("fast");
            $(menus.join(',').replace('#menu2')).slideUp();

    });
    $('#faqMenu').click(function() {
            $('#menu3').slideToggle("fast");
                          $(menus.join(',').replace('#menu3')).slideUp();

    });

---

对于这类事情，使用一堆ID很少是个好主意。相反，使用相对于单击元素的DOM遍历：

$('#navigation ul li').click(function () {
    var idx = $(this).index();

    $('#content > div').eq(idx).slideToggle().siblings().slideUp();
});

---

请注意，我确实在内容周围放了一个包装。此解决方案仅依赖于两个ID，并且可以通过一些额外的标记更改将其减少为一个ID

您一次只想扩展一个？是的。对不起。我会编辑这篇文章，让它更清晰。哇。我喜欢这个解决方案。将在可能的情况下进行投票。考虑一个不依赖于多个IDS的解决方案。这可能很难维护，而且有点脆弱，因为它依赖于大量的标记。谢谢你的洞察力！与.hide（）相比，我更喜欢.slideup（），答案相差悬殊时，计时并不重要。；-）虽然这是可行的，但它不必要地复杂，而且有点难以阅读。只有更有经验的开发人员才会知道join在那里做什么。@isherwood是的，我知道，我比bristol-james-answer投了更高的票

 var menus = ['#menu1', '#menu2', '#menu3']

    $('#homeMenu').click(function() {
            $('#menu1').slideToggle("fast");
            $(menus.join(',').replace('#menu1')).slideUp();
    });
        $('#shopMenu').click(function() {
            $('#menu2').slideToggle("fast");
            $(menus.join(',').replace('#menu2')).slideUp();

    });
    $('#faqMenu').click(function() {
            $('#menu3').slideToggle("fast");
                          $(menus.join(',').replace('#menu3')).slideUp();

    });

$('#navigation ul li').click(function () {
    var idx = $(this).index();

    $('#content > div').eq(idx).slideToggle().siblings().slideUp();
});