我正在构建我的菜单行为,并希望对 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');
最佳答案
已更新
无需将其绑定(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" );
}
});
关于javascript - jQuery 调整大小,未按预期执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23642195/