javascript - 使用toggle()时如何正确防止冒泡？

Question

我试图在页面加载时显示列表(如果超过 768 像素)，但如果小于 768 像素则隐藏它们，并让它们在单击标题时显示。

它工作正常，但在调整窗口大小后就不行了，我不明白为什么会发生这种情况？有什么建议吗？

我应该如何正确处理冒泡？

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/