尝试在单击链接时使slideToggle保持打开状态

Question

当单击这个JQuery时，我可以隐藏并显示它在UL下的LIs，并且它可以工作。然而，当我点击一个链接下的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代码中填充ULs和LIs，但为了便于阅读，我将其取出来。就像我说的，一切正常，我得到多个ULs和多个LIs，可点击的链接都能工作，但它只是切换幻灯片，然后在单击其中一个可点击的链接后再次隐藏它，我不希望它。

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();
});

检查这个演示

Answer 3

我试着用非常不同的方式使用e.stopPropagation();，但它对我没有用：

所以我找到的解决办法是：

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

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

也许这不是最传统的方法，但它也有效:)