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

Chris 发表于 Dev

克里斯

我尝试在大于768px时显示页面加载时的列表，但在小于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

克里斯蒂安314159

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

(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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。