jQuery 슬라이딩 메뉴 기능

Question

안녕하세요, 정렬되지 않은 목록 메뉴가 하위 항목을 아래로 슬라이드 및 주요 항목을 클릭하여 만들려고 jQuery 코드를 쓴 작동하지만 열려있는 메뉴를 클릭 할 때 닫기 및 다시 열어 봐.하지만 그냥 닫을 수 있기를 바랬다. li 클래스 menuactive이있는 경우

HTML

<div class="menuNav"> 
    <ul> 
    <li><span>item_1</span> 
    <ul> 
     <li>sub-item_1-1</li> 
     <li>sub-item_1-2</li> 
     <li>sub-item_1-3</li> 
     <li>sub-item_1-4</li> 
    </ul> 
    </li> 

    <li><span>item_2</span> 
    <ul> 
     <li>sub-item_2-1</li> 
     <li>sub-item_2-2</li> 
     <li>sub-item_2-3</li> 
     <li>sub-item_2-4</li> 
    </ul> 
    </li> 

    <li><span>item_3</span> 
    <ul> 
     <li>sub-item_3-1</li> 
     <li>sub-item_3-2</li> 
     <li>sub-item_3-3</li> 
     <li>sub-item_3-4</li> 
    </ul> 
    </li> 
</ul> 
</div> 

jQuery를

$(document).ready(function() { 

    $('.menuNav ul li').click(function(){ 
     $(this).parent().find('ul').slideUp("fast"); 
     $(this).parent().find("li").removeClass('menuactive'); 
     $(this).find('ul').slideDown("slow"); 
     $(this).addClass('menuactive'); 
     }); 

    $('.menuNav ul .menuactive').click(function(){ 
     $(this).parent().find('ul').slideUp("fast"); 
     }); 

}); 

Answer 1

클래스를 제거, 모든 ul들에 slideUp() 함수를 호출 slideUp() 함수를 호출 클래스 다른 menuactive을 제거 menuactive 모두 li s에서 클릭 한 후 추가 버튼 slideDown() 클릭 한 클래스에 menuactive 클래스.

$(document).ready(function() { 
 
    $('ul > li > ul').hide(); 
 
    $('.menuNav > ul > li').click(function() { 
 
    if ($(this).hasClass('menuactive')) { 
 
     $(this).find('ul').slideUp('fast'); 
 
     $(this).removeClass('menuactive'); 
 
    } else { 
 
     $(this).siblings().find('ul').slideUp('fast'); 
 
     $(this).siblings().removeClass('menuactive'); 
 
     $(this).find('ul').slideDown('fast'); 
 
     $(this).addClass('menuactive'); 
 
    } 
 
    }); 
 
});

.menuactive { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="menuNav"> 
 
    <ul> 
 
    <li><span>item_1</span> 
 
     <ul> 
 
     <li>sub-item_1-1</li> 
 
     <li>sub-item_1-2</li> 
 
     <li>sub-item_1-3</li> 
 
     <li>sub-item_1-4</li> 
 
     </ul> 
 
    </li> 
 

 
    <li><span>item_2</span> 
 
     <ul> 
 
     <li>sub-item_2-1</li> 
 
     <li>sub-item_2-2</li> 
 
     <li>sub-item_2-3</li> 
 
     <li>sub-item_2-4</li> 
 
     </ul> 
 
    </li> 
 

 
    <li><span>item_3</span> 
 
     <ul> 
 
     <li>sub-item_3-1</li> 
 
     <li>sub-item_3-2</li> 
 
     <li>sub-item_3-3</li> 
 
     <li>sub-item_3-4</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>