2014-05-13 17 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