jquery - 垂直手風琴導航菜單

Question

我有這個垂直手風琴像側欄導航。一切工作正常，但我正面臨一些問題，我使用它從Twitter Bootstrap 3它的圖標。

這裏的FIDDLE。

當我展開我想對於圖標的列表項目朝下，當我再次單擊它沒有得到崩潰。並且我還希望將圖標更改爲面向chevron圖標。

也請幫我在想，當它要擴大我想要從朝左向下動畫添加過渡到它。

而且我只能在點擊文本時才能展開菜單。我無法做到這一點。

在此先感謝。

Answer 1

我覺得我成功地實現你所追求的：這裏的FIDDLE

這裏的主要JS功能。這有點不整潔，但基本功能在那裏。您可以根據需要修復它。

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>'); 
    } 
}); 
}); });