Javascript jQuery菜单在第二次单击时未隐藏

我正在尝试学习一些jquery，我想做一个简单的下拉列表，它在开始时隐藏，但在单击某些文本时显示，但在再次单击时隐藏。代码如下：

基本HTML：

<h1 class="Menu">Menu</h1>

    <div id="submenu">
        <ul>
            <a href="#"><li>Menu 1</li></a>
            <a href="#"><li>Menu 2</li></a>
            <a href="#"><li>Menu 3</li></a>
            <a href="#"><li>Menu 4</li></a>
            <a href="#"><li>Menu 5</li></a>
            <a href="#"><li>Menu 6</li></a> 
        </ul>
    <div>

是不是因为类在页面加载时没有注册到DOM中，所以它不知道它在寻找什么

在这里，使用这个js代码

$(document).ready(function() {
   $("#submenu").hide(); 
});

$("#mainmenu").click(function() {
    if($("#submenu").is(":hidden")){
        $("#submenu").show("slow");
        $(".Menu").text("Close Menu");
        $(".Menu").removeClass( "Menu" ).addClass( "CloseMenu" );
    }
    else{
        $("#submenu").hide();
        $(".CloseMenu").text("Menu");
        $(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
    }
});

不工作的原因是您正在运行时更改类。仅当您有静态选择器时才使用。单击。就像我在这里使用ID一样，使用这个js代码

$(document).ready(function() {
   $("#submenu").hide(); 
});

$("#mainmenu").click(function() {
    if($("#submenu").is(":hidden")){
        $("#submenu").show("slow");
        $(".Menu").text("Close Menu");
        $(".Menu").removeClass( "Menu" ).addClass( "CloseMenu" );
    }
    else{
        $("#submenu").hide();
        $(".CloseMenu").text("Menu");
        $(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
    }
});

不工作的原因是您正在运行时更改类。仅当您有静态选择器时才使用。单击。就像我使用的ID一样，Try.toggle（）

还可以尝试#子菜单{display:none；}而不是jQuery

Try.toggle（）

---

还可以尝试#子菜单{display:none；}而不是jQuery

由于绑定此事件时CloseMenu类不存在，因此需要执行以下操作：

$(document).on('click', ".CloseMenu", function() {
  $("#submenu").hide();
  $(".CloseMenu").text("Menu");
  $(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});

---

由于绑定此事件时CloseMenu类不存在，因此需要执行以下操作：

$(document).on('click', ".CloseMenu", function() {
  $("#submenu").hide();
  $(".CloseMenu").text("Menu");
  $(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});

---

您的HTML无效。当您调用

click

函数时，jquery会将click处理程序附加到与选择器匹配的元素。这意味着，如果以后动态更改元素以匹配同一选择器，则不会追溯应用单击处理程序。请看一看，了解如何为动态更改的元素执行此操作。太棒了！感谢Bucky提供的资源！您的HTML无效。当您调用

click

函数时，jquery会将click处理程序附加到与选择器匹配的元素。这意味着，如果以后动态更改元素以匹配同一选择器，则不会追溯应用单击处理程序。请看一看，了解如何为动态更改的元素执行此操作。太棒了！感谢Bucky提供的资源！哇，这太棒了！我不知道您可以在jQuery中原生地使用这样的条件语句，但现在我知道了。谢谢Maverick！哇，这太棒了！我不知道您可以在jQuery中原生地使用这样的条件语句，但现在我知道了。谢谢Maverick！