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 を使用します。IDを使ったように

于 2013-09-18T17:04:35.020 に答える
1

.toggle() を試してください

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

jQuery の代わりに #submenu{display:none;} も試してください。

于 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 に答える