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

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" );
});

第二次单击时不会隐藏jQuery菜单

3 个答案: