jQuery：點擊其子女時停止下拉菜單崩潰

我有一個頂部的導航欄，其中的一些項目觸發下拉/下拉菜單。jQuery：點擊其子女時停止下拉菜單崩潰

我的問題是，無論何時點擊一個項目，或者實際上下拉菜單中的任何區域，下拉菜單都會崩潰。

我需要幫助的是確定如何避免在單擊子元素時摺疊下拉列表（或者，在下拉區域中的任何位置，因爲我想要說明下拉列表中的意外點擊，但不是實際上點擊了一個子元素）。

這裏是基本的HTML 結構我：

<ul class="dropdown"> 
<li><a href="#" class="noclick nojs">Select your Topic</a> 
    <ul class="nojs" > 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    </ul> 
</li> 
</ul>

我的javascript：

$('.dropdown li').click(function() { 
    //Hide all other drop downs that are visible, and remove the class 'selected' 
    $(this).siblings('.selected').removeClass('selected').find('ul:visible').slideUp('fast'); 

    //Show/Hide dropdowns 
    $(this).toggleClass('selected'); 
    $('ul:first', this).stop(true, true).slideToggle('fast'); 
});

這裏有一個DEMO

任何幫助是極大的讚賞。

謝謝。

來源

2012-11-12 Ricardo Zea

停止event.stopPropagation()這些子元素，因此該事件不會冒泡到李

$('ul.nojs *').click(function(e){ 
    e.stopPropagation(); 
});

http://jsfiddle.net/DEfK9/

來源

2012-11-12 20:18:19

好吧'stopPropagation（）;'，現在我終於明白它的意思:)，你可以告訴我是新來的jQuery。我不必修改我當前的腳本，這非常棒。它完美無瑕，非常感謝。 –

DEMO - 將.click()事件到<a>標籤，而不是<li>標籤。

$('.dropdown .noclick').click(function(e) { 
    // Do stuff. 
});

來源

2012-11-12 20:20:52 Coby

Coby，好主意。雖然我沒有選擇你的答案作爲最終答案，但你已經向我展示了下一次如何處理這個問題的例子。謝謝你的幫助。給你一個upvote。現在用你的例子 –

使用下面的代碼片段你可以簡單地改變的slideToggle（）來了slideDown（）：

http://jsfiddle.net/yrzRu/

if ($(this).not('.selected')) { 
     $('ul:first', this).stop(true, true).slideDown('fast'); 
     $(this).addClass('selected'); 
    }

來源

2012-11-12 20:24:51

現在不可能摺疊下拉菜單。不過謝謝。 –

在這裏你去！

FIDDLE

$('.dropdown').children('li').click(function() { 

    //Show clicked dropdown and add 'selected' class 
    $(this).addClass('selected').find('ul').slideToggle('fast'); 

    //Hide all other dropdowns and remove 'selected' class 
    $('.dropdown').children('li').not(this).removeClass('selected').find('ul').slideUp('fast'); 

});

來源

2012-11-12 20:40:04 VIDesignz

與烘烤食品相同的問題，現在無法通過點擊項目本身來摺疊下拉菜單。感謝壽。 –

Ohhhh，我沒意識到你想要那個！ – VIDesignz

@Ricardo在這裏，你去！而不是slideDown，我們使用slideToggle :) http://jsfiddle.net/videsignz/zEQVK/7/ – VIDesignz

jQuery：點擊其子女時停止下拉菜單崩潰

回答

相關問題