Question

我有这个菜单，它工作正常，但是，我正在构建一个带有内部链接的页面网站。当窗口调整大小并显示移动菜单时，链接正在运行，但单击后菜单不会折叠。我需要添加到我的jQuery才能实现这种效果？

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

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

    $(window).resize(function(){
        var w = $(this).width();

        if(w > 768 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });

    $('li').on('click', function(e) {               
        var w = $(window).width();
        if(w < 768 ) {
            menu.slideToggle();
        }
    });

    $('.panel').height($(window).height());

    });

我的HTML标记在这里：

<div id="nav-wrapper">

    <nav class="cl-effect-4">

        <ul>
            <li><a href="#home">Home</a>
            </li>
            <li><a href="#about">About Us</a>
            </li>
            <li><a href="#benefits">Benefits</a>
            </li>
            <li><a href="#products">Products</a>
            </li>
            <li><a href="#contacts">Contacts</a>
            </li>
        </ul>

        <a href="#" id="pull">Menu</a>

    </nav>

</div>

<div style="clear:both"></div>

Answer 1

如果我没错，$(pull)应为pull，对吗？

And it works for me, after this modification.

P.S。是否还有一些CSS，因为你已经调用了menu.removeAttr('style');？如果有其他更改，请将整个代码放在fiddle中。

单击后菜单折叠

1 个答案: