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

我认为问题在于.sub-menu和数字之间的空格。如果您更改代码以使用.sub-menu-1 .sub-menu-2等，我认为您会发现它有效。

我认为是这种情况的原因是因为空格表示在DOM中将该第二个类应用于该对象。因此，.sub-menu 1实际上是两个类sub-menu和1。您也可以选择.1，然后您就可以获得正确的元素。如果你只是尝试$(".sub-menu 1").html("CHANGED THE HTML");，你将看不到任何变化。但是，如果您将其更改为$(".1").html("CHANGED");或将班级名称更改为sub-menu-1，然后更改为$(".sub-menu-1").html("CHANGED")，则也会有效。

Answer 2

如果你改变你的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/

编辑 - 更新以隐藏单击

上显示的菜单

$('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 3

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

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

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

3 个答案: