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 Window

问题描述

感谢SO的杰出贡献者！当您开始了解jQuery时，jQuery会变得更酷. :)

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

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

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

如果不清楚，请告诉我.

谢谢！

解决方案

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

以下是文档: http://api.jquery.com/event.stopPropagation/

基本上，发生的是当您单击<a>时，将触发click事件，但是由于它包含在<li>中，因此也会触发click事件.事件从子级到父级的过程称为事件冒泡.您可以使用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/

Thanks to the wonderful contributors here at SO! jQuery is much cooler when you begin to understand it. :)

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

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.

If this is not clear, please let me know.

Thanks!

解决方案

I think what you are looking for is probably event.stopPropagation()

Here's the documentation: 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.

Let's assume you have an HTML structure like so:

<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:

ul ul { display: none; }

Apply this jQuery, and you should get the result you're looking for:

$(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/

这篇关于jQuery-单击LI，显示/隐藏UL-单击LI:a href，继续显示UL并在空白窗口中打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！