Question

我试图在页面加载时显示超过768px的列表但是如果更少则隐藏它们并在点击标题时显示它们。

它工作正常，但没有调整窗口大小后，我不知道为什么会发生这种情况？有什么建议吗？

我应该如何妥善处理冒泡？

HTML：

<nav>
    <h3 class="nav__title">first</h3>
    <div class="links">
        <ul>
            <li><a href="#">first one</a></li>
            <li><a href="#">first two</a></li>
            <li><a href="#">first three</a></li>
        </ul>
    </div>
</nav>
<nav>
    <h3 class="nav__title">second</h3>
    <div class="links">
        <ul>
            <li><a href="#">second one</a></li>
            <li><a href="#">second two</a></li>
            <li><a href="#">second three</a></li>
        </ul>
    </div>
</nav>

JS：

(function () {

    function footerLinks() {
        if ($(window).width() < 768) {
            $(".links").hide();
            $(".nav__title").on("click", function (e) {
                e.preventDefault();
                $(this).next(".links").toggle("fast");
            });
        } else {
            $(".links").show();
        }
    }

    footerLinks();

    $(window).resize(function () {
        footerLinks();
    });

}());

jsfiddle

Answer 1

我认为这就是你想要的，每次调整窗口大小时你都会添加事件处理程序：

(function () {

     $(".nav__title").on("click", function (e) {

                e.preventDefault();

                // Drop out of function if window is big enough
                if( $(window).width() >= 768 ){ return; }

                $(this).next(".links").toggle("fast");
            });

    function footerLinks() {

        if ($(window).width() < 768) {         

            $(".links").hide();

        } else { 
            $(".links").show(); 
        }            
    }

    footerLinks();

    $(window).resize(function () {
        footerLinks();
    });

 }());

http://jsfiddle.net/E64j4/6/

使用toggle（）时如何正确防止冒泡？

1 个答案: