Jquery选择孩子但不是父母

Posted 2023-02-25

【中文标题】Jquery选择孩子但不是父母

【英文标题】：Jquery selecting children but not parent

【发布时间】：2013-07-08 14:28:20

【问题描述】：

http://jsfiddle.net/xfPxp/

基本上尝试创建一个多层次的向下滑动点击菜单， 我已经让子菜单向下滑动，但我不知道如何停止 当我点击孩子们时，父母来自slideUp-ing。感谢您的帮助！

html 代码 --------------------------------------------- --------------------------

<!--Nav Menu 1-->

<ul class="make">Club Car
    <ul class="model" style="display: none">Precedent
        <ul class="product" style="display: none">Brush Guard</ul>
        <ul class="product" style="display: none">Lift Kits</ul>
    </ul>

    <ul class="model" style="display: none">DS
        <ul class="product" style="display: none">Brush Guard</ul>
        <ul class="product" style="display: none">Lift Kits</ul>
    </ul>
</ul>

<!--- Nav Menu 2-->

<ul class="make">E-Z-Go
    <ul class="model" style="display: none">TXT
        <ul class="product" style="display:none">Brush Guard</ul>
        <ul class="product" style="display:none">Lift Kits</ul>
    </ul>

    <ul class="model" style="display: none">RXV
        <ul class="product" style="display:none">Brush Guard</ul>
        <ul class="product" style="display:none">Lift Kits</ul>
    </ul>

Jquery 脚本 --------------------------------------------- -----

<script>
$("ul.make").click(function () 
        if ($(this).children('ul').is(":hidden")) 
            $(this).children('ul').slideDown("fast");
        
        else 
            $(this).children('ul').slideUp("fast");
        
);
$("ul.model").click(function () 
    if ($(this).children('ul').is(":hidden")) 
        $(this).children('ul').slideDown("fast");
    
    else 
        $(this).children('ul').slideUp("fast");
    
);
</script>

【参考方案1】：

在您传递给函数的event 上使用.stopPropagation：

$("ul.make").click(function (event) 
    event.stopPropagation();
    if ($(this).children('ul').is(":hidden")) 
        $(this).children('ul').slideDown("fast");
     else 
        $(this).children('ul').slideUp("fast");
    
);

$("ul.model").click(function (event) 
    event.stopPropagation();
    if ($(this).children('ul').is(":hidden")) 
        $(this).children('ul').slideDown("fast");
     else 
        $(this).children('ul').slideUp("fast");
    
);

演示：http://jsfiddle.net/xfPxp/1/

【讨论】：

这是一个非常简单的修复。我做了一个较早的版本，我给每个子树自己的唯一 ID，并编写了一个完整的脚本来单独处理每一行。这会让它更干净。谢谢！

没问题，简而言之，stopPropagation 阻止事件冒泡到父级，因此您实际上能够捕获单击的元素。

【参考方案2】：

您只需将 event.stopPropagation 添加到您的函数中。

http://jsfiddle.net/9hQz8/

您的点击事件正在冒泡到另一个函数。

$("ul.make").click(function (event) 
    alert("make " + this.tagName + " " + this.className);
            if ($(this).children('ul').is(":hidden")) 
                $(this).children('ul').slideDown("fast");
            
            else 
                $(this).children('ul').slideUp("fast");
            
    event.stopPropagation();
);
$("ul.model").click(function (event) 
    alert("make " + this.tagName + " " + this.className);
        if ($(this).children('ul').is(":hidden")) 
            $(this).children('ul').slideDown("fast");
        
        else 
            $(this).children('ul').slideUp("fast");
        
    event.stopPropagation();
);