jQuery點擊並不冒泡到父

Question

當點擊div.arrow時，它的類應該切換，摺疊的內容應該展開/摺疊。這是行得通的，但div.arrow上的點擊事件並不冒泡到它的父母，li.level1。在一個相關的筆記，我怎麼會得到兄弟，span也包括在這個冒泡？

HTML

<ul id="list"> 
    <li class="level1"><div class="arrow arrow-down"></div>Exact Matches 
     <ul id="ul_first" class="level1a"> 
      <li><b>GE</b> Ab Illo Inventore: ASJK: (2365)</li> 
      <li><b>GE</b> Doloremque: PEOJ: (92454)</li> 
      <li>Eaque <b>GE</b> Ipsa Quae</li> 
      <li>Porro Quisquam <b>GE</b> Est</li> 
      <li>Sit Voluptatem <b>GE</b></li> 
     </ul> 
    </li> 
    <li class="level1"><div class="arrow arrow-right"></div>Advisor <span>(7)</span> 
     <ul class="level1a"> 
      <li>Ab Ill<b>ge</b>o Inventore</li> 
      <li>A<b>ge</b>usantium</li> 
      <li>Aspernatur Aut<b>ge</b></li> 
      <li>Beata<b>ge</b>e Vitae Dicta</li> 
      <li>Consequuntur<b>ge</b></li> 
      <li>Geloremque</li> 
      <li>Geque Ipsa Quae</li> 
     </ul> 
    </li> 

CSS

li.level1 .arrow-down, li.level1 .arrow-right { 
    width: 0; 
    height: 0; 
    position: absolute; 
} 

li.level1 .arrow-down { 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 7px solid #444; 
    left: -16px; 
    top: 7px; 
} 

li.level1 .arrow-right { 
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-left: 7px solid #444; 
    left: -12px; 
    top: 5px; 
} 

JS

$('div.arrow').click(function(){ 
    var arrowRight = $(this).hasClass('arrow-right'); 
    var arrowDown = $(this).hasClass('arrow-down'); 
    console.log("R: "+arrowRight); 
    console.log("D: "+arrowDown); 

    $(this).parent().children('ul.level1a').slideToggle(); 

    if (arrowRight) { 
     $(this).removeClass('arrow-right').addClass('arrow-down'); 
    } else if (arrowDown) { 
     $(this).removeClass('arrow-down').addClass('arrow-right'); 
    }; 
}); 

Answer 1

我想你可以縮短你的代碼是：

$('#list > li').click(function() { 
    $(this).find('ul.level1a').slideToggle(); 
    $(this).find('.arrow').toggleClass('arrow-right arrow-down'); 
}); 

Fiddle Demo

Answer 2

檢查演示在這裏，http://jsfiddle.net/LFp5n/

使用$(this).parent().children('span.sibling')選擇的兄弟姐妹