javascript - jQuery 调整大小，未按预期执行

Question

我正在构建我的菜单行为，并希望对 jQuery 使用一些媒体查询。

This is the basic functionality of the menu.我只希望在 nav ul li 为 display: block 时加载它。一旦它们是 inline-block 或其他东西，我就不想使用 slideToggle。

我尝试使用 resize.function，如 this article 中所述，但是当我这样做时，slideToggle 在点击时发生两次，which you can see in this fiddle .

在初始加载时，当您单击下拉列表 li 时，它会按预期执行，但如果您调整窗口大小，然后单击 li，它会滑动切换两次；我想知道为什么会这样，因为我对 jQuery 还很陌生。

JS

$(window).resize(function(){    
    if ($("header nav ul li").css("display") == "block" ){
        $( ".dd" ).click(function() {
            $( ".submenu" ).slideToggle( "slow" );
            $( ".ar" ).toggleClass( "up" );
        });
    }
}).trigger('resize'); 

Answer 1

已更新

无需将其绑定(bind)到调整大小，只要不触发它，除非 li 元素是“ block ”。这行得通，试试吧。

$( ".dd" ).click(function() {
    if ($("header nav ul li").css("display") == "block"){
        $(this).parent().find( ".submenu" ).slideToggle( "slow" );
        $(this).find( ".ar" ).toggleClass( "up" );
    }
});