JQuery와는 3 레벨 정렬되지 않은 목록

Question

을 숨길 sliddown 나는 다음과 같은 jQuery를 가지고 :

<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() 
    { 
    $(".indexSlideMenu1_Folder div").click(function() 
    { 
     $(this).removeClass('sliding'); 
     if ($(this).parent().find('ul').is(':hidden')) 
     {          
     $(this).parent().find('ul').slideDown(); 
     } 
     else 
     { 
     $(this).parent().find('ul').slideUp(); 
     } 
    }); 
    }); 
    </script> 

목록은 시각 예술을 페이지가 처음로드를 보여줍니다. 시각 예술이 클릭되면 영화 목록을 포함한 전체 목록이 아래로 슬라이드됩니다. 시각 예술 목록을 클릭하면 영화 목록을 숨기려고합니다. 그런 다음 필름 목록을 클릭하고 아래로 밀어 내려합니다.

<div id="indexSlideMenu1"> 
    <ul> 
    <li class="indexSlideMenu1_Folder"><div><a href="#">VISUAL ARTS</a></div> 
    <ul style="display:none;"> 
     <li><a href="./index.php">(dè)Collage</a></li> 
     <li><a href="">Drawing</a></li> 
     <li><div><a href="#">Film</a></div><span><!-- empty --></span> 
     <ul style="display:none;"> 
     <li><a href="./index.php">(dè)Collage</a></li> 
     <li><a href="">Drawing</a></li> 
     <li><a href="">Design</a></li> 
     <li><a href="">Painting</a></li> 
     <li><a href="">Photography</a></li> 
     </ul> 
    </li> 
    <li><a href="">Design</a></li> 
    <li><a href="">Painting</a></li> 
    <li><a href="">Photography</a></li> 
    <li><a href="">Print Making</a></li> 
    <li><a href="">Sculpture</a></li> 
    <li><a href="">Street Art</a></li> 
    </ul> 
    </li> 
    </ul> 
    </div> 

Answer 1

어떻게 이런 일에 대해 :

$(".indexSlideMenu1_Folder div").click(function() { 
    $(this).removeClass('sliding'); 
    if ($(this).parent().find('ul:first').is(':hidden')) { 
     $(this).parent().find('ul:first').slideDown(); 
    } 
    else { 
     $(this).parent().find('ul').slideUp(); 
    } 
});​ 

jsFiddle example.