jquery - 수직 아코디언 탐색 메뉴

Question

사이드 바 탐색과 같은 세로 아코디언이 있습니다. 모든 것은 잘 작동하지만 나는 아이콘을 사용하여 어떤 문제에 직면하고있다. Twitter Bootstrap 3.

여기는 FIDDLE입니다.

목록 항목을 확장하면 아이콘을 아래로 향하게하고 다시 클릭하면 축소되지 않습니다. 아이콘을 왼쪽으로 변경하려면 chevron 아이콘을 변경하고 싶습니다.

또한 확장하려고 할 때처럼 전환 효과를 추가하는 데 도움이됩니다. 왼쪽에서 아래로 마주 보면서 애니메이션 효과를주고 싶습니다.

또한 텍스트를 클릭 할 때만 메뉴를 확장 할 수 있습니다. 나는 전체 행에 그것을 할 수 없었다.

미리 감사드립니다. 여기에 여기에 FIDDLE

있어 주요 JS 기능입니다 :

Answer 1

나는 당신이 후에 무엇인지 구현하는 관리 생각합니다. 조금 깔끔하지만 기본 기능이 있습니다. 원하는대로 고칠 수 있습니다.

function toggleAccordion(li) { 
    if(li.hasClass('active')) { 
     li.removeClass('active'); 
     $('.sub-menu', li).slideUp(); 
     $('i', li).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left'); 
    } 
    else { 
     $('li.active .sub-menu').slideUp(); 
     $('li i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left'); 
     $('li.active').removeClass('active'); 
     li.addClass('active'); 
     $('.sub-menu', li).slideDown(); 
     $('i', li).removeClass('glyphicon-chevron-left').addClass('glyphicon-chevron-down'); 
    } 
}; 

Answer 2

코드 아래 확인이

$(window).load(function(){ 
$(document).ready(function() { 
    $('.sidebar ul li a').click(function(ev) { 
    //$('.sidebar .sub-menu').not($(this).parents('.sub-menu')).slideUp(); 
    $(this).next('.sub-menu').slideToggle(); 
    ev.stopPropagation();   
    if($(this).find("i").hasClass('glyphicon-chevron-left')){ 
     $(this).find("i").remove(); 
     $(this).append('<i class="sidebar-icon glyphicon glyphicon-chevron-down"></i>'); 
    }else{ 
     $(this).find("i").remove(); 
     $(this).append('<i class="sidebar-icon glyphicon glyphicon-chevron-left"></i>'); 
    } 
}); 
}); });