1

モバイル用のトグル メニューがあります。私が必要としているのは、ユーザーがメニュー項目をクリックすると、トグル メニューを閉じる必要があるということです。

jQuery:

$(".nav-button").click(function () {
    $(".nav-button,.primary-nav").toggleClass("open");
});

HTML:

<button class="nav-button">Toggle Navigation</button>
<nav id="mobile-nav">
    <ul class="primary-nav">
        <li class="current"><a class="scroll-link" href="#home">text</a></li>
        <li><a class="scroll-link" href="#tab2">text</a></li>
        <li><a class="scroll-link" href="#tab3">text</a></li>
        <li><a class="scroll-link" href="#tab4">{text</a></li>
        <li><a class="scroll-link" href="#tab5">{text</a></li>
        <li><a class="scroll-link" href="#tab6">{text</a></li>
    </ul>
</nav>

どんな助けでも大歓迎です、ありがとう

アップデート

すべての回答に感謝しますが、どれも私が望むものを達成しませんでした.私の最初の質問は少しゴミだったことを知っています!

主な理由は、私がやっているサイトが視差スクローラーであるため、メニュー項目がクリックされたときにトグル メニューを閉じて、ユーザーが静的メニューを表示する代わりに視差効果を確認できるようにすることです。

ユーザーがメニュー項目をクリックしたときにトグル メニューを閉じるソリューションを思いついた

問題は、メニュー項目をクリックした後にトグル ボタンをクリックしてもメニューが開かないことです。

メニュー項目がクリックされてメニューが閉じられたら、デフォルトで元のオープン クラスに戻す方法はありますか

$(".nav-button").click(function () {
    $(".nav-button,.primary-nav").toggleClass("open");
});  

$(".scroll-link").click(function () 
    $(".nav-button,.primary-nav").toggleClass("close");
});
4

4 に答える 4

1

[ここにリンクの説明を入力][1]これは少し遅れているかもしれませんが、同じモバイル メニューを使用して同じ質問に対する答えを探していました。

$(".nav-button, ul.primary-nav li a").click(function () {
$(".primary-nav").toggleClass("open");
});

http://jsfiddle.net/rcdtest/HDQNs/

于 2013-10-24T03:28:25.557 に答える
0

.slideToggle()で試してください:

$("button.nav-button").click(function() {
    $("nav#mobile-nav").slideToggle("fast");
});

$("ul.primary-nav li a").click(function() {
    $("nav#mobile-nav").slideUp("fast");
});

jsフィドル

于 2013-09-26T10:11:12.283 に答える