0

jQueryを使用して、リンクがクリックされたときにメニューをスライドして開閉しますが、これはうまく機能しています。ただし、メニュースライドが開く前にリンクがクリックされたときにクラスを追加し、メニュースライドが閉じた後に同じクラスを削除しようとしています。

クリック > addClass > スライド メニューを開く > もう一度クリック > スライド メニューを閉じる > removeClass

    $("#categoryNav").hide();
    $('#showHideLink').click(function(){
        $("#categoryNav").slideToggle(function() { 
            $('#showHideLink').toggleClass("catMenuOpen");
            $('#mainNav').toggleClass("catMenuOpen");
        });
    });

最初のクリックで正しい効果が得られるを使用する代わりに関数の$('#mainNav'.addClass('catMenuOpen');前に追加しようとしましたが、ナビゲーションが再び閉じた後にクラスを削除する方法がわかりません。slideToggletoggleClass

乾杯

編集: ここに私のHTMLがあります:

    <div id="mainNav">
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a id="showHideLink">Show Hide</a></li>
        </ul>
    </div>
    <div id="categoryNav">
        <ul>
            <li><a href="#">CatMenu</a></li>
        </ul>
    </div>
4

5 に答える 5

1

次のことを試してください。

$('#showHideLink').click(function(){
    if($(this).hasClass("catMenuOpen"){
       $(this).removeClass("catMenuOpen");
    }else
       $(this).addClass("catMenuOpen");
    $("#categoryNav").slideToggle(function() { 
        $('#showHideLink').toggleClass("catMenuOpen");
        $('#mainNav').toggleClass("catMenuOpen");
    });

実際にテストする機会がないため、上記のコードが100％動作するかどうかは完全にはわかりませんが、要素に「open」クラスがある場合は、それを削除する必要があります（もう一度クリックして、divを閉じています）。クリックして要素に「open」クラスがない場合は、それをdivに追加します。

于 2012-05-03T04:36:17.053 に答える