2015-08-20 32 views
1

我正在使用jQuery-menu-aim作爲我的導航菜單。我遇到了一個問題,當菜單不再被遮蓋時,展開的子菜單將保持活動狀態。這裏是我的代碼,但問題是不容易看到的位置:我可以用jQuery-menu-aim手動激活一行停用嗎?

 $(".nav-section").menuAim({ 
      activate: function(row) { 

       var $row = $(row) 

       $(row).toggleClass("nav-active"); 
       var navItem = $(row).attr("data-nav-item"); 
       $(".nav-panel[data-nav-panel='" + navItem + "'").toggleClass("nav-panel-active"); 

      }, 
      deactivate: function(row) { 
       $(".drop-nav").removeClass("first-hover"); 
       $(row).toggleClass("nav-active"); 

       var navItem = $(row).attr("data-nav-item"); 
       $panel = $("[data-nav-panel='" + navItem + "'") 
       $panel.toggleClass("nav-panel-active"); 
      }, 

      enter: function() { }, 
      exit: function() { }, 
      exitMenu: function() { }, 
      rowSelector: "> li", 
      submenuDirection: "right" 
     }); 

這裏是一個Codepen會告訴你什麼是我說的:在紅色菜單http://codepen.io/jimmykup/pen/BNgzzG

懸停,然後懸停在菜單項上展開子菜單。在子菜單可見的情況下,將鼠標懸停在菜單之外。然後將鼠標懸停在紅色菜單上再次顯示菜單。您會注意到,在離開之前,無論哪個子菜單處於活動狀態仍處於活動狀態。當用戶鼠標離開菜單並且它消失時,我想要重置子菜單。

我試過使用下面的代碼來實現這種行爲,但它並沒有工作,而是我有一個奇怪的錯誤,其中多個父行將突出顯示。

 $(".nav-browse-products").mouseleave(function() { 

      $(".nav-active").toggleClass("nav-active"); 
      $(".nav-panel-active").toggleClass("nav-panel-active"); 

     }); 

我對它的唯一想法不是使用這個額外的代碼是該行停用未觸發。沒有它,它會保持舊的行以及一個新的行。我不確定是否有辦法手動啓動行停用。我通過插件挖掘,但無法破譯的方式來做到這一點。

任何幫助將不勝感激。

回答

相關問題