2012-01-17 3 views
0

은 내가 follwing을 HTMLjQuery를 표시 숨기기 리 및 UL

<ul class="shopp_categories"> 
    <li class="current"> 
     <a class="current" href="link">Gifts For Her</a> 
     <ul class="children active" style="display: none;"> 
     <li><a>Hand Bag Holders</a></li> 
     </ul> 
    </li> 

    <li><a href="link">Gifts ForHim</a></li> 
    <li><a href="link">Innovative Gifts</a></li> 
    <li><a href="link">Jewellery</a> 
     <ul class="children" style="display: none;"> 
     <li><a>Alrun Runes</a></li> 
     </ul> 
    </li> 
    </ul> 

다음과 같은 jQuery를을 가지고

jQuery(document).ready(function() { 
    $('ul ul').hide(); 
    $('ul.children active').show(); 
    $('ul.children li a').removeAttr("href"); 
    $('ul.children li > a').mouseover(function(event) { 
     $('ul ul').hide('slow'); 
     $(this).parent().find('ul').toggle('slow'); 
    }); 
}); 

내가 UL의 숨길 아이를 얻을 수 있습니다하지만 난 그들에게 마우스를 통해 보여 그럴수 활성 상태 인 경우 열어 두십시오.

답변

3

활성 상태에서 숨기는 것을 방지하려면 다음과 같이 if 문이 필요합니다.

if(!$(this).hasClass('active')){ //if it doesn't have the class active 
    $(this).hide(); 
} 

언급 한 첫 번째 문제에 대해서는 요소를 숨기면 스타일이 display:none이됩니다. 이 시점에서 요소에 대해 마우스 이벤트를 실행할 수 없습니다. 그것은 렌더링 된 문서에서 제거되기 때문에 그것을 클릭하거나 마우스를 올려 놓거나 마우스를 떼어 놓을 수 없습니다.

그리고 참고로, 구문에 오류가 있습니다. $('ul.children active')$('ul.children.active')이어야합니다.