如何在Jquery中显示/隐藏多个元素

Question

我目前正在创建一种类型的菜单，它将包含子菜单，当选择一个菜单项时，将出现该特定菜单项的子菜单，并且任何其他打开的子菜单都将关闭。

每个菜单列表都是以内联方式显示的，因此它们彼此相邻，一行中有3个，子菜单将直接显示在横跨整个页面宽度的下方，并将菜单的其余部分向下推到页面中。

我遇到了麻烦，以至于当按下项目1时，只显示子菜单1，依此类推。当前，当按下任何项目时，将显示子菜单1。

下面是html。

<ul id="menu">
        <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<div class="sub-menu 1">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu 2">
        <ul>
            <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu 3">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>   




<ul id="menu">
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

<div class="sub-menu 4">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu 5">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu 6">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

下面是jquery

$(document).ready(function(){
    $("#menu > li").toggle(
    function(){

             $("#buying-guide-homepage > li").animate({height:109},"slow");
             $(".sub-menu 1").slideDown("slow");

        },
        function(){

        $(".sub-menu 1").slideUp("slow");
        $("#buying-guide-homepage > li").animate({height:89},"slow");

        });
 });

Answer 1

如果您像这样更改您的html：

<ul id="menu">
     <li id='sub-menu1'>Item 1</li>
    <li id='sub-menu2'>Item 2</li>
    <li id='sub-menu3'>Item 3</li>
</ul>

<div class="sub-menu1">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu2">
        <ul>
            <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu3">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>   




<ul id="menu">
    <li id='sub-menu4'>Item 4</li>
    <li id='sub-menu5'>Item 5</li>
    <li id='sub-menu6'>Item 6</li>
</ul>

<div class="sub-menu4">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu5">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu6">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

你可以这样做：

$('div[class^="sub-menu"]').hide();
$("#menu > li").click(function(event){
    var id = event.target.id;
    console.log(id);
    $('div[class^="sub-menu"]').hide();
    $('div[class="'+id+'"]').show();

});

小提琴在这里：http://jsfiddle.net/ZEKNM/

EDIT - UPDATE可在单击时隐藏显示的菜单

$('div[class^="sub-menu"]').hide();
$("#menu > li").click(function(event){
    var id = event.target.id;
    var div =  $('div[class="'+id+'"]');  
    if(div.is(':visible')){
       div.hide();
     }else{
       $('div[class^="sub-menu"]').hide();
       div.show();
      }

});

在此更新小提琴：http://jsfiddle.net/ZEKNM/1/

Answer 2

我认为问题出在子菜单和数字之间的空格。如果您将代码更改为使用.sub-menu-1 .sub-menu-2等，我想您会发现它可以工作。

我认为是这样的原因是因为空格表示将第二个类应用于DOM中的对象。所以你的.sub-menu 1实际上是两个类，sub-menu和1。你也可以只选择by .1，然后你就会得到合适的元素。如果您只尝试执行$(".sub-menu 1").html("CHANGED THE HTML");，您将不会看到任何变化。但是，如果您将其更改为$(".1").html("CHANGED");，或者将类名更改为sub-menu-1，然后执行$(".sub-menu-1").html("CHANGED")，它也可以工作。

Answer 3

http://jsfiddle.net/dNcpJ/1/

可能有一种更好的方法来选择显示哪个菜单，我只是将顶级菜单的内部文本作为子菜单的ID。