부모() 어린이()과

Question

를 작동하지 않는 사용으로 전환 I 다음과 같은 HTML이 있습니다.

<div class="connections"> 
    <h2>Grads that share your interests</h2> 
     <div id="connections_nav" class="collapse"> 
      <ul> 
      <li><h3><a href="">Sally Struthers </a></h3><p>Class of 2008</p></li> 
       <li><h3><a href="">Sally Struthers </a></h3><p>Class of 2008</p> 
           </li> 
      <li><h3><a href="">Sally Struthers </a></h3><p>Class of 2008</p> 
           </li> 
      </ul> 
     </div> 
</div> 

그리고 다음 CSS :

.connections h2 { 
    background-image: url(images/show.gif); 
    background-position: 0px; 
    background-repeat: no-repeat; 
    color: #660a11; 
    font-size: 13px; 
    font-weight: bold; 
    margin: 0px 0px .4em; 
    padding: 0px 0px 0px 25px; } 

.connections .hide h2 { 
    background-image: url(images/hide.gif); 
    background-position: 0px; 
    background-repeat: no-repeat; } 

.connections h2.over { 
    background-image: url(images/hover-show.gif); 
    background-position: 0px; 
    background-repeat: no-repeat; } 

.connections .hide h2.over { 
    background-image: url(images/hover-hide.gif); 
    background-position: 0px; 
    background-repeat: no-repeat; } 

다음 jQuery를 사용하여 다음

$(document).ready(function() { 

$('.connections h2').click(function() { 
    $(this).parent().children('.collapse').toggle('slow'); 
    $(this).toggleClass('hide'); 
}); 

$('.connections h2').hover( 
    function() { 
     $(this).toggleClass('over'); 
     }, 
     function() { 
     $(this).toggleClass('over'); 
}); 

을

}};

전체 div가 사라지는 현상이 발생합니다. $(this).toggleClass('hide'); 코드를 가져 오면 접힌 div가 제대로 축소됩니다 (그러나 닫힌 삼각형 이미지가 적용된 '숨기기'클래스는 분명히 적용되지 않음). 왜 그런가요?

Answer 1

라인 $(this).toggleClass('hide')은 <h2></h2>에서 <h2 class="hide"></h2>으로 변경됩니다.

따라서, 올바른 CSS 선택기가 있어야한다 :

.connections h2.hide {} 
.connections h2.hide.over {} 

근무 예 : http://jsfiddle.net/PTnXU/ 당신이 <div>와 <h2> 사이에 다른 요소가 있다면 원래 선택, .connections .hide h2.over이 좋은했을

, 예 :

<div class="connections"> 
    <div class="hide"> 
    <h2 class="over"></h2> 
    </div> 
</div>