0

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

4

3 回答 3

3

在这里，使用这个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。就像我用身份证一样

于 2013-09-18T17:04:35.020 回答
1

试试 .toggle()

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

也可以尝试 #submenu{display:none;} 而不是 jQuery。

于 2013-09-18T17:07:11.533 回答
1

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

$(document).on('click', ".CloseMenu", function() {
  $("#submenu").hide();
  $(".CloseMenu").text("Menu");
  $(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});
于 2013-09-18T17:07:42.060 回答