jQuery - 点击 LI，显示/隐藏 UL - 点击 LI:a href，继续显示 UL 并在空白窗口中打开答案

【问题标题】：jQuery - Click on LI, show/hide UL - Click on LI:a href, continue to show UL and open in Blank WindowjQuery - 点击 LI，显示/隐藏 UL - 点击 LI:a href，继续显示 UL 并在空白窗口中打开
【发布时间】：2010-08-20 23:01:53
【问题描述】：

感谢 SO 的出色贡献者！当您开始了解 jQuery 时，它会更酷。 :)

所以我有一个 LI，单击它会显示/隐藏子 UL。我想做的是能够单击 LI 内的链接，该链接会打开一个空白窗口，但也不会关闭子 UL。空白窗口打开完成

a[href^="http://"]').attr("target", "_blank");

但是，我不确定如何在 LI 上“返回：false”，因此当空白窗口打开时它不会关闭 UL。我希望用户在关闭空白窗口时能够看到他们所在的子 UL。

如果不清楚，请告诉我。

谢谢！

【问题讨论】：

请添加您的代码以显示/隐藏子 UL。
嗨戴夫，感谢您的评论，是的，我应该这样做 :) 我得到了它：$('#dd a').click(function(e){ e.stopPropagation( ); });

标签： jquery jquery-selectors event-bubbling

【解决方案1】：

我认为您正在寻找的可能是 event.stopPropagation()

这是文档：http://api.jquery.com/event.stopPropagation/

基本上，当您点击<a> 时，会触发点击事件，但由于它包含在<li> 中，因此也会触发点击事件。事件从子节点到父节点的过程称为事件冒泡。您可以使用 event.stopPropagation() 来停止它。

假设你有一个这样的 HTML 结构：

<ul>
    <li class="reveal">One<br />
        <a href="http://www.google.com" target="_blank">Google</a>
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
        </ul>
    </li>
    <li class="reveal">Two<br />
        <a href="http://www.google.com" target="_blank">Google</a>
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
        </ul>
    </li>
    <li class="reveal">Three<br />
        <a href="http://www.google.com" target="_blank">Google</a>
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
        </ul>
    </li>
</ul>

此外，我们会说您有一个 CSS 规则：

ul ul { display: none; }

应用这个 jQuery，你应该会得到你想要的结果：

$(function () {
    $('.reveal').click(function() {
        $(this).children('ul').slideToggle();
    });

    $('.reveal a').click(function(event) {
        event.stopPropagation();
    });
});

这是一个现场演示：http://jsfiddle.net/PaxTg/

【讨论】：

非常感谢您的精彩解释。我已经在我的脚本中使用了 e.stopPro... 来退出子 UL 的打开。我将它用于链接。效果很好！

【解决方案2】：

您可能想看看event orders，然后在适当的时间停止传播您的事件。

【讨论】：