1

CSS-Tricks のレスポンシブ ドロップダウン メニューを使用しています。

レスポンシブ メニューの概念

ユーザーがリンクをクリックした後にメニューが消えるようにしたいと思います。これはレスポンシブな 1 ページの Web サイトであるため、リンクをクリックすると、ユーザーは問題のコンテンツまで下にスクロールされます。

クリック後にメニューを自動的に非表示にするにはどうすればよいですか?

メニューは現在 CSS のみですが、必要に応じて JavaScript を追加することに何の不安もありません。

ここにhtmlがあります

<div class="nav-container">
    <nav class="three columns" role="custom-dropdown">
        <input type="checkbox" id="button">
        <label for="button" onclick></label>

        <ul>
            <li><a href="#header"><span>Home</span></a></li>
            <li><a href="#aboutus"><span>About SoEmi</span></a></li>
            <li><a href="#massage"><span>Massage</span></a></li>
            <li><a href="#special"><span>Specials</span></a></li>
            <li><a href="#mobile"><span>Mobile Spa</span></a></li>
            <li><a href="#appointment"><span>Appointment</span></a></li>
            <li><a href="#where"><span>Find Us</span></a></li>
        </ul>
    </nav>
</div>

以下のコードを frenchie から変更し、問題を修正しました。ありがとうございました。

$(document).ready(function () {

$('.nav-container').on({

   click: function () { $("#button").prop("checked", false); }

}, 'a');

});

4

1 に答える 1

0

イベントを処理する必要があるため、これには JavaScript が必要です。

このようなもの：

$(document).ready(function () {

    $('.nav-container').on({

       click: function () { $('.nav-container').hide(); }

    }, 'a');

});

ページにあることを確認jQueryしてください。

于 2013-01-27T03:19:21.430 に答える