我正在使用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");
});
我對它的唯一想法不是使用這個額外的代碼是該行停用未觸發。沒有它,它會保持舊的行以及一個新的行。我不確定是否有辦法手動啓動行停用。我通過插件挖掘,但無法破譯的方式來做到這一點。
任何幫助將不勝感激。