javascript - jQuery 菜单在第二次单击时不隐藏

Question

我正在尝试学习一些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>

jQuery:

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

$(".Menu").click(function() {
    $("#submenu").show("slow");
    $(".Menu").text("Close Menu");
    $(".Menu").removeClass( "Menu" ).addClass( "CloseMenu" );
});
$(".CloseMenu").click(function() {
    $("#submenu").hide();
    $(".CloseMenu").text("Menu");
    $(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});

是否是因为该类在页面加载时没有注册到 DOM 中，所以它不知道它在寻找什么？ Also here is the JS Fiddle I was doing it in.

Answer 1

这里，使用这个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" );
    }
});

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