jQuery - 单击 LI，显示/隐藏 UL - 单击 LI:a href，继续显示 UL 并在空白窗口中打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3535442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Click on LI, show/hide UL - Click on LI:a href, continue to show UL and open in Blank Window
提问by jasonflaherty
Thanks to the wonderful contributors here at SO! jQuery is much cooler when you begin to understand it. :)
感谢 SO 的出色贡献者！当您开始理解 jQuery 时，它会酷得多。:)
So I have an LI that when clicked shows/hides a child UL. What I would like to do is have the ability to click on an link inside the LI that opens a blank window, but also doesn't close the child UL. The blank window opening is done
所以我有一个 LI，当点击它时会显示/隐藏子 UL。我想要做的是能够点击 LI 内的链接，打开一个空白窗口，但也不会关闭子 UL。空白窗口打开完成
a[href^="http://"]').attr("target", "_blank");
however, I am not sure how to "return: false" on the LI so it doesn't close the UL when the blank window opens. I want the user to be able to see the child UL they were on when they close the blank window.
但是，我不确定如何在 LI 上“返回：false”，因此当空白窗口打开时它不会关闭 UL。我希望用户在关闭空白窗口时能够看到他们所在的孩子 UL。
If this is not clear, please let me know.
如果这还不清楚，请告诉我。
Thanks!
谢谢！
回答by Ender
I think what you are looking for is probably event.stopPropagation()
我想你要找的可能是 event.stopPropagation()
Here's the documentation: http://api.jquery.com/event.stopPropagation/
这是文档：http: //api.jquery.com/event.stopPropagation/
Basically, what's happening is that when you click on the <a>, the click event is triggering, but since it is contained in the <li>the click event is also triggered on it. This process of the event going from child to parent is called event bubbling. You can use event.stopPropagation() to stop it.
基本上，发生的事情是，当您单击 时<a>，会触发单击事件，但由于它包含在<li>单击事件中，因此也会在其上触发。事件从子级到父级的过程称为事件冒泡。您可以使用 event.stopPropagation() 来停止它。
Let's assume you have an HTML structure like so:
假设你有一个像这样的 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>
Further, we'll say that you have a CSS rule:
此外，我们会说您有一个 CSS 规则：
ul ul { display: none; }
Apply this jQuery, and you should get the result you're looking for:
应用这个 jQuery，你应该得到你想要的结果：
$(function () {
$('.reveal').click(function() {
$(this).children('ul').slideToggle();
});
$('.reveal a').click(function(event) {
event.stopPropagation();
});
});
Here's a live demo of this in action: http://jsfiddle.net/PaxTg/
这里有一个现场演示：http: //jsfiddle.net/PaxTg/
回答by line-o
you might want to have a look at event ordersand then stop propagation of your event at the right time.
您可能想查看事件顺序，然后在正确的时间停止事件的传播。
