单击导航链接后如何关闭响应式导航下拉列表

Question

以下是我用于导航的代码。

<nav id="nav" class="clearfix">
    <ul class="clearfix">
    <li class="current"><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
<li><a href="#section-4">Section 4</a></li>
<li><a href="#section-5">Section 5</a></li>
    </ul>
    <a href="#" id="pull">Menu</a>
</nav>

这是我正在使用的脚本。

    $(function() {
        var pull        = $('#pull');
            menu        = $('nav ul');
            menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(window).width();
            if(w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });

响应式导航工作正常，单击链接后无法关闭它。我必须单击菜单按钮才能将其关闭。

Answer 1

$('#nav ul li a').on('click',function(){
    $(this).parent().parent().slideToggle(); 
});

这应该有效。

使用.parent()，你可以在hyrachie中加快一步，所以使用它两次从链接到菜单本身。