Question

我正在使用http://www.hongkiat.com/blog/responsive-web-nav/本教程完全用于我的网站菜单，但唯一的问题是我正在创建一个单页网站。我想点击'about'之后关闭手机菜单。这样它就会滚动到底部。

我希望你能帮助我。

这是我的鳕鱼：

     <!-- Menu Navigation Start -->
    <nav class="clearfix">  
        <ul class="clearfix">  
            <li><a href="#">k</a></li>  
            <li><a href="#">How-to</a></li>  
            <li><a href="#">Icons</a></li>  
            <li><a href="#">Design</a></li>  
            <li><a href="#">Web 2.0</a></li>  
            <li><a href="#">Tools</a></li>    
        </ul>  
                <a href="#" id="pull">Menu</a>  
    </nav>

这是javascript：

<script>
    $(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');
            }
        });


    });



</script>

Answer 1

选择错误

如果你有

var pull        = $('#pull');

不是吗

    pull.on('click', function(e) {...

或只是

$('#pull').on(...)

Answer 2

试试这个。单击导航项时，它将执行slideToggle功能。

menu.find('a').click(function(){
    menu.slideToggle();
});

Answer 3

如果要在菜单外单击时滑动菜单，可以使用方法

stopPropagation();

http://jsfiddle.net/Joseph82/jwNEZ/

单击链接后关闭Jquery菜单

3 个答案: