Question

我正在使用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 id="Navigation">
<ul>
    <li><a href="#" id="homeMenu">Home</a></li>
    <li><a href="#" id="shopMenu">Shop</a></li>
    <li><a href="#" id="faqMenu">FAQ</a></li>
</ul>
</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>

Answer 1

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

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

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

Demo

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

Answer 2

可能将你的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>

然后为每个菜单项更改JavaScript，如下所示：

$('#menu1').slideToggle("fast").siblings().hide();

Answer 3

您可以手动滑动其他容器。

 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();

    });

http://jsfiddle.net/Rn9tg/906/

Jquery切换关闭其他容器

3 个答案: