jQuery的选择儿童而不是父母

http://jsfiddle.net/xfPxp/jQuery的选择儿童而不是父母

基本上是试图建立一个多层次的幻灯片下点击菜单，我已经得到的子菜单来了slideDown，但我无法弄清楚如何停止当我点击孩子时，从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>

来源

2013-07-08 Mister-Green

使用.stopPropagation在event，你通过你的功能：

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

来源

2013-07-08 14:31:38 tymeJV

这是一个非常简单的修复。我做了一个早期的版本，在这个版本中，我为每个子树分配了自己的唯一ID，并编写了一个脚本的全部对接加载来分别处理每一行。这会让它更干净。谢谢！ –

没问题，简而言之，'stopPropagation'可以阻止事件冒泡到父母身上，所以您实际上可以捕获单击的元素。 – tymeJV

你只是不得不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(); 
});

来源

2013-07-08 14:38:46

jQuery的选择儿童而不是父母

回答

相关问题