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

也许这不是最传统的方式，但它也有效：）

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

3 个答案: