幫助重構jQuery菜單

$('#menu > li').hover(function() { 
     $(this).prev().addClass('nobg'); 
    }, function() { 
     $(this).prev().removeClass('nobg'); 
    }); 
    $('#menu > li:has(.submenu)').hover(function() { 
     $(this).addClass('active').children('ul').show(); 
     $(this).prev().addClass('nobg'); 
    }, function() { 
     $(this).removeClass('active').children('ul').hide();  
     $(this).prev().removeClass('nobg'); 
    });

..工程很好，但看起來真的很醜，是否有可能用較少的行壓縮這個？幫助重構jQuery菜單

非常感謝您的幫助。

來源

2011-05-04 3zzy

不要對自己這麼辛苦，這是非常簡潔的IMO :) – HurnsMobile 2011-05-04 14:53:47

請發佈此HTML ...我可以驗證一個解決方案。 – 2011-05-04 15:03:59

你可以發佈http://jsfiddle.net所需的最小代碼來顯示你的工作菜單嗎？ – mellamokb 2011-05-04 15:08:16

可能：

$('#menu > li').hover(function() { 
    $(this).prev().stop(true, true).toggleClass('nobg'); 
}); 
$('#menu > li:has(.submenu)').hover(function() { 
    $(this).toggleClass("active") 
     .children('ul').stop(true, true).toggle(); 
});

基於http://api.jquery.com/hover/（最後一個例子）。

使用「停止」是爲了避免像這裏http://forum.jquery.com/topic/hover-and-toggleclass-fail-at-speed

問題給我評論，如果它不能正常工作。

來源

2011-05-04 15:00:58 Meligy

另外，您可能想嘗試從第一個方法中刪除「停止」，因爲您不會執行動畫或任何需要那麼長時間的任何操作。並告訴我它是怎麼回事 – Meligy 2011-05-04 15:05:45

我發現了代碼中的錯誤，我從jQuery例子中複製了「next」。刪除。現在看。 – Meligy 2011-05-04 15:08:24

我懷疑這不能只用CSS來實現......但

「懸停」有一個重載，只需要一個功能，這將要求這兩個事件。此外，您可以使用toggleClass而不是添加和刪除。

$('#menu > li').hover(function() { 
    $(this).prev().toggleClass('nobg'); 
}); 

$('#menu > li:has(.submenu)').hover(function() { 
    $(this).toggleClass('active').children('ul').toggle(); 
    $(this).prev().toggleClass('nobg'); 
});

上面的代碼可能無法正常工作，但因爲你會調用切換兩次與子什麼...我會用下面的代碼試試。用當前的試用發佈jsfiddle會非常有幫助。我可以驗證它適用於你的情況:)或只是發佈的HTML。

$(('#menu > li').hover(function() { 
    $(this).toggleClass('active').children('ul').toggle(); 
    $(this).prev().toggleClass('nobg'); 
});

另外，您的css能否確定孩子uls的知名度？

.active>ul 
{ 
    display:list-item; 
}

如果是這樣，您可以搭乘「.children（'ul'）。toggle（）」在一起。

來源

2011-05-04 14:55:45

@mellamokb是的！對不起，:) :) – 2011-05-04 14:57:40

近乎成功！ :)'$（this）.prev（）。toggleClass（'nobg'）;'第二個函數內部不起作用。嗯... – 3zzy 2011-05-04 15:07:17

是的，它確實...但它也適用於第一個功能。因此，他們相互抵消。嘗試使用上面的第二個代碼片段... – 2011-05-04 15:11:17

添加到@ xixonia的解決方案，你可以從中分出功能分成不同的功能，這樣的代碼如下（未經測試）：

var nobgtoggle = function() { $(this).prev().toggleClass('nobg'); } 
var submenutoggle = function() { 
    $(this).toggleClass('active').children('ul').toggle(); 
    nobgtoggle(); 
}; 

$('#menu > li').hover(nobgtoggle); 
$('#menu > li:has(.submenu)').hover(submenutoggle);

來源

2011-05-04 14:59:53 mellamokb

幫助重構jQuery菜單

回答

相關問題