尝试获得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(); 
    }); 
}); 

也许这不是最常规的方法，但它也可以:) :)