嘗試獲得slideToggle在點擊鏈接時保持打開狀態

Question

我有點這個JQuery來隱藏和顯示UL下的LI，當它被點擊時，它就可以工作。但是，當我點擊UL中的某個鏈接時，它會關閉，我希望它保持打開狀態。

<script type="text/javascript"> 
$(function() { 
    $('.headlink').click(function() { 
     $(this).children('ul').slideToggle(); 
    });  
    $('.headlink').click(function(event) { 
     event.stopPropagation(); 
    }); 
}); 
</script> 

這是UL。

<ul class="arclist"> 
    <li class="headlink"> 
    <h2>+ Top Link</h2> 
     <ul class="transcriptfile" style="display:none;">'; 
    <a href="transcripts/filename"><li> 
    <p>Clickable Link</p></li></a> 
     </ul> 
</ul> 

如果從一些PHP代碼中填充UL和LI，但是我爲了便於閱讀而將其取出。就像我說過的，一切正常，我得到了多個UL和多個LI，可點擊的鏈接都可以工作，但只需點擊其中一個可點擊鏈接即可切換幻燈片並隱藏它，但我不希望這樣。

Answer 1

你可以使用.stopPropagation()摺疊出菜單上，以防止它切換上點擊。

http://jsfiddle.net/pVQsv/

$(function() { 
    $('.headlink').click(function() { 
     $('ul', this).slideToggle(); 
    }); 
    $('.headlink ul').click(function(e) { 
     e.stopPropagation(); 
    }); 
}); 

Answer 2

可以將處理器綁定這樣的h2元素：

$('.headlink h2').click(function() { 
    $(this).next('ul').slideToggle(); 
}); 

檢查This Demo

Answer 3

我試圖以非常不同的方式使用e.stopPropagation();，但它並沒有爲我工作:(

於是我找到的解決方案是這樣的：

$(function() { 
    $('.headlink').click(function() { 
     $('.headlink ul').slideToggle(); 
    }); 

    $("headlink ul a").click(function() { 
     $(".headlink ul").stop(); 
    }); 
}); 

也許這不是最常規的方法，但它也可以:) :)