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

发布于 2024-09-15 17:08:57 字数 319 浏览 3 评论 0原文

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

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

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

，我不确定如何在 LI 上“return: false”，这样当空白窗口打开时它不会关闭 UL。我希望用户在关闭空白窗口时能够看到他们所在的子 UL。

如果不清楚，请告诉我。

谢谢！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泛滥成性 2024-09-22 17:08:58

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

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

基本上，发生的情况是，当您单击时，会触发单击事件，但由于它包含在 >

点击事件也会在其上触发。事件从子级传递到父级的过程称为事件冒泡。您可以使用 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/

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/

回复收藏 0 原文