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