jQuery下拉菜單單擊不懸停

我試圖讓這個下拉菜單使用單擊而不是懸停，但我似乎無法讓它工作。任何想法的人？jQuery下拉菜單單擊不懸停

// Drop Menu 
$(".navigation ul ul, .shoppingbasket ul ul").css({display: "none"}); 
$(".navigation ul li, .shoppingbasket ul li").hover(function(){ 
$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); 
},function(){ 
$(this).find('ul:first').css({visibility: "hidden"}); 
});

來源

2011-07-16 Delete

你試過用 '點擊'（2號線） – Guidhouse

@Guidhouse一詞替換 '懸停' - 這是行不通的，。點擊（）只需要一個處理程序，.hover （）需要兩個 - 請參閱我的答案。 –

.hover()有兩個處理，當你的鼠標進入第一個被執行，二是當你的鼠標離開執行。由於這個原因，只需將.hover()與.click()交換將不起作用，因爲.click()只需要一個單擊時執行的處理程序。但是，.toggle()可用於綁定多個處理程序，以便在其他點擊上執行。

$(".navigation ul ul, .shoppingbasket ul ul").css({display: "none"}); 
$(".navigation ul li, .shoppingbasket ul li").toggle(function(){ 
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); 
    },function(){ 
    $(this).find('ul:first').css({visibility: "hidden"}); 
});

Try it out here.

此外，這是很難說的w/o的HTML，但.slideDown()會使元素可見，你可能需要使用.slideUp()。所以，你可能想嘗試這樣的事：

$(".navigation ul ul, .shoppingbasket ul ul").css({display: "none"}); 
$(".navigation ul li, .shoppingbasket ul li").toggle(function(){ 
    $(this).find('ul:first').slideDown(400); 
    },function(){ 
    $(this).find('ul:first').slideUp(400); 
});

Try it out here.

其實，爲什麼不使用.slideToggle()，這使事情變得更加緊湊，並允許您使用.click()？

$(".navigation ul ul, .shoppingbasket ul ul").css({display: "none"}); 
$(".navigation ul li, .shoppingbasket ul li").click(function(){ 
    $(this).find('ul:first').slideToggle(400); 
});

Try it out here.

來源

2011-07-16 15:23:20

謝謝你的回覆我去了一個頭，嘗試了示例代碼，發現下拉鍊接不起作用，請參閱此處的問題http://www.media21a.co.uk/clientlogin/benaiahmatheson/benaiah-matheson/ – Delete

@Adam - 現在沒有太多時間，但問題是鏈接正在工作。您點擊下拉菜單，但同樣的CLICK也會將您發送到另一個頁面。您必須禁用單擊頂層項目的默認功能（這可能是爲什麼它最初使用懸停而不是單擊）。 gl - 我有時間後可能會更新。 –

另一個問題是，當你有更多的子UL ..這是行不通的。 – numediaweb

jQuery下拉菜單單擊不懸停

回答

相關問題