Javascript 响应下拉菜单-单击后隐藏菜单

我正在使用CSS技巧中的响应下拉菜单

我想让菜单在用户点击链接后消失。这是一个响应性很强的单页网站，因此在点击链接后，用户会向下滚动到相关内容

单击后如何自动隐藏菜单

虽然菜单目前只是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>

---

})

这需要javascript，因为需要处理事件

大概是这样的：

$(document).ready(function () {

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

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

    }, 'a');

});

---

确保页面上有jQuery。

我需要在选择器字段中输入什么？我将在导航代码中进行编辑。选择器字段是什么意思？你说不可能知道“选择器”中会出现什么内容，我正在询问你提供的代码中要编辑什么内容。顺便说一下，谢谢你，那似乎不起作用。这可能是javascript冲突。有问题的测试站点的链接会有帮助吗？对不起，我在Wordpress中放了一个链接，但不小心把它放在了noconflict补丁之外。非常感谢。这解决了我的问题。

$(document).ready(function () {

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

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

    }, 'a');

});