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

jquery - 垂直手风琴导航菜单

2 个答案: