1

私は jQuery の初心者で、助けが必要です。この HTML コードを使用して、簡単なナビゲーションを行うために到着しました。

<div class="tabs">
    <div class="tab">
        <a class="tab-link" href="#">SPECS</a>
        <div class="sub-menu">
            <a href="#">Specs 1</a>
            <a href="#">Specs 2</a>
            <a href="#">Specs 3</a>
        </div>
    </div>
    <div class="tab">
        <a class="tab-link" href="#">GALLERY</a>
        <div class="sub-menu">
            <a href="#">Gallery 1</a>
            <a href="#">Gallery 2</a>
            <a href="#">Gallery 3</a>
        </div>
    </div>
    <div class="tab">
        <a class="tab-link" href="#">PROJECTS</a>
        <div class="sub-menu">
            <a href="#">Projects 1</a>
            <a href="#">Projects 2</a>
            <a href="#">Projects 3</a>
        </div>
    </div>
    <div class="tab">
        <a class="tab-link" href="#">CONTACT US</a>
        <div class="sub-menu">
            <a href="#">Contact 1</a>
            <a href="#">Contact 2</a>
            <a href="#">Contact 3</a>
        </div>
    </div>
</div>

そして、私はこのjQueryコードを手に入れました:

$(".tab-link").click(function () {
    $(this).parent().find(".sub-menu").toggleClass("visible");
});

.sub-menu は css に隠され、.visible クラスはただdisplay:block;

うまく機能していますが、問題が発生しました。最初のメニュー項目をクリックすると、サブメニューが正しく開きます。しかし、別のアイテムをクリックすると、最初のサブメニューの上にサブメニューが開きます。前にクリックしたサブメニューの親をクリックして閉じる必要があります。サブメニューが既に開いている場合、別の親をクリックすると、最初にすべての .sub-menus が表示クラスで非表示になり、.visible クラスがそのサブメニューに追加されます。私がはっきりしていることを願っています。

ありがとう。

4

4 に答える 4

0

表示されているクラスをすべての要素から単純に削除することはできません。これは、切り替えたいため、クリックされたメニュー項目以外のすべてから削除する必要があります。そうすれば、クリックしたメニュー項目のオンとオフを切り替えることができます。

http://jsfiddle.net/KYmcP/

$(".tab-link").click(function () {
    var $tab = $(this).closest(".tab");
    $(".tab").not($tab).find(".sub-menu").removeClass("visible");
    $(this).parent().find(".sub-menu").toggleClass("visible");
});
于 2013-09-10T13:38:05.870 に答える