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的選擇兒童而不是父母

回答

相關問題