javascript - 响应式下拉菜单 - 单击后隐藏菜单

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在页面上有。