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') 거품 이벤트에 형제 자매에게