2014-05-13 18 views
0

我在建设我的菜单行为的过程中,想要使用jQuery的一些媒体查询不执行。jQuery的调整,如预期

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

我尝试使用中解释的resize.function,但是当我这样做时,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'); 
+0

每次运行resize处理程序时,都会添加一个附加的点击处理程序。 – Barmar

+0

为处理另一个事件的处理程序内的一个事件绑定处理程序是很少正确的。全局绑定处理程序,并让外部处理程序设置内部处理程序检查的变量。 – Barmar

+0

我应该强调,我对jQuery非常**,所以我不完全确定如何去做,但谢谢你的回应。 – justinw

回答

1

更新

没有必要将其绑定到调整,只是不停地从射击,除非li元素是 “块”。这工作,试试看。

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

如果浏览器调整大小,那么这样做是否正常? [我正在做类似的事情](http://jsfiddle.net/3dX3T/30/),但我希望它考虑到浏览器的大小调整。 - _edit,NVM似乎perfectly._ – justinw

+1

工作呀,它的作用是检查“头导航UL礼”是否显示为块,如果是,按下该键则下拉。如果不是,则不切换它们。基本上,只要您的媒体查询生效并更改为内嵌块,click事件就会停止切换下拉菜单。 – aecend