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