響應式下拉菜單-單擊后隱藏菜單

Question

我正在使用CSS-Tricks的響應下拉菜單

響應菜單概念

我希望菜單在用戶單擊鏈接后消失。 這是一個響應式的網頁網站，因此在單擊鏈接后，用戶將向下滾動到相關內容。

單擊后如何自動隱藏菜單？

盡管菜單當前僅是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');

}）;

Answer 1

您需要使用JavaScript，因為您需要處理事件。

像這樣：

$(document).ready(function () {

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

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

    }, 'a');

});

確保頁面上有jQuery 。