jquery - 如何在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

我认为问题在于 .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")，它也会起作用。