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中，所以不知道它在尋找什么？ 這里也是我正在做的JS Fiddle。

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

Answer 2

試試.toggle（）

$('.Menu').toggle( 
  function() {
    //Do something
}, 
  function() {
    //Do Something Else
});

也可以嘗試#submenu {display：none;}而不是jQuery。

Answer 3

由於綁定此事件時CloseMenu類不存在，因此需要執行以下操作：

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