Jquery SlideToggle，防止在特定情況下切換

所以我有一個帶有灰色背景矩形的H3。當你在那個灰色背景中的任何地方點擊時，一個特定的div執行slideToggle（）。這工作正常。Jquery SlideToggle，防止在特定情況下切換

現在，在H3裏面我還有一個鏈接，它調用了一個jquery函數來執行某些操作。這也很好。

但我的問題是這樣的，因爲鏈接是在H3內部，在它的函數執行之後，它也執行slideToggle（），因爲我在H3內部的某處點擊了。

所以問題就變成了，當我單擊鏈接時，如何防止發生slideToggle（）。我想我可以使用國旗，但我希望有一種更優雅的方式。

任何幫助，將不勝感激。

的HTML代碼

<h3 id="data_id"> 
    <a href="#" id="random_id" >Random</a> 
</h3> 

<div id="data_div_id"> 
    // The data here is irrelevant to the issue at hand 
</div>

jQuery代碼

$('#data_id').click(function() { 
    $('#data_div_id').slideToggle('slow');  
}); 

$('#random_id').click(function(event) { 
    // it does something irrelevant to the issue at hand 
});

來源

2013-04-25 LatinCanuck

嘗試跳過的元素，你不想對事件：這樣才#data_id

$('#data_id').click(function(event) { 
    if (event.target !== this) 
     return; 
    $('#data_div_id').slideToggle('slow');  
});

將觸發切換，自您H3的是在該分區它點擊它們也會被執行，但實際上點擊該容器只會執行一次

來源

2013-04-25 15:29:22 Yeronimo

因此在這個例子中，這意味着如果事件不是源自#data_id點擊，那麼跳過？我是否正確理解這一點？ – LatinCanuck 2013-04-25 16:03:45

這個答案和user125697的工作很好。我將採取這一個，因爲我實際上需要H3內的3個鏈接。多謝你們。 – LatinCanuck 2013-04-26 00:38:08

是的，你在第一個評論中是正確的:) – Yeronimo 2013-04-26 07:17:33

您可以使用event.stopPropagation()從冒泡停止活動。

jsFiddle here.

$('#data_id').click(function() { 
    $('#data_div_id').slideToggle('slow');  
}); 

$('#random_id').click(function(event) { 
    event.stopPropagation(); 
});

來源

2013-04-25 15:27:50 lifetimes

該解決方案也很棒。如果你有h3的隨機ID或者可能有多個，我的解決方案可能更適合。 – Yeronimo 2013-04-25 15:33:07

@Yeronimo或者你可以簡單地給他們所有相同的類，而且它會適用於多個罰款 – lifetimes 2013-04-26 07:21:40

是的。事情是我不知道他們是否會有相同的課程。檢查被點擊的元素是否是點擊所綁定的實際元素也會解決所有這些問題。更多的道路導致羅馬:) – Yeronimo 2013-04-26 07:29:31

Jquery SlideToggle，防止在特定情況下切換

回答

相關問題