JQuery와

Question

를 사용하여 열린 클래스에서 직접 UL 유지 나는이 다음과 같은 비트 오 'JQuery와 :

// Code for Side Navigation 
    $("#sideNav ul li:not(:has(li.current))") 
    .find("ul").hide().end() // Hide all other ULs 
    .hoverIntent(
     function(){ 
      $(this).children('ul').slideDown('fast'); 
     }, 
     function(){ 
     // $(this).children('ul').slideUp('fast'); 
     } 
    ); 

그것은 클래스 current 개방 어떤 리를 떠나, 아래로 탐색 위로 슬라이드. li에 클래스 current이 있으면 그 바로 아래에있는 ul도 열려 있지만 해당 레벨 아래의 다른 ul은 닫힌 상태로 유지됩니다.

<ul> 
    <li>Category 1 
     <ul> 
      <li class="current">Currently Open 
       <ul> 
        <li>Sub Cat 1 - should show 
         <ul><li>Should not Show</li></ul> 
        </li> 
        <li>Sub Cat 2 - should show</li> 
      </li> 
     </ul> 
    </li> 
    <li> Category 2 
     <ul><li>Should not Show></li></ul> 
    </li> 
</ul> 

Answer 1

그림을 아웃 : 하단에

추가

$("#sideNav ul li.topCurrent").find("ul").show(); 
$("#sideNav ul li.topCurrent").find("ul li:not(:has(li.current)) ul").hide(); 

jquery 코드

Answer 2

첫째로, 당신은 당신의 HTML을 수정해야합니다 : 여기

는 HTML 구조입니다. 두 번째 중첩 된 UL은 닫히지 않습니다. 두 번째 방법은 .current 클래스의 현재 트레일에있는 모든 LI 요소를 할당하는 것입니다.

<ul> 
<li class="current">Category 1 
    <ul> 
     <li class="current">Currently Open 
      <ul> 
       <li>Sub Cat 1 - should show 
        <ul><li>Should not Show</li></ul> 
       </li> 
       <li>Sub Cat 2 - should show</li> 
      </ul> 
     </li> 
    </ul> 
</li> 
<li> Category 2 
    <ul><li>Should not Show</li></ul> 
</li> 

그런 다음 자바 스크립트없이 문제를 해결해야이 CSS를

li.current>ul{ 
    display : block; 
} 

li ul{ 
    display : none; 
} 

를 사용합니다. 이게 당신이 찾는거야?

호버 (hover) 효과를 추가해야하는 경우, 잡아 당기는중인 .current 클래스를 추가하면됩니다.

나는 어떤 영감 jQuery 코드를 (그것을 테스트하지 않은 경우) 당신을 도울 것을 추가 한

:

$('li:has(ul)').bind('mousein',function(){ 
    $(this).find('ul').slideDown(); 
}); 
$('li:has(ul)').bind('mouseout',function(){ 
    $(this).find('ul').slideUp(); 
});