jquery - 垂直手风琴导航菜单答案

【问题标题】：jquery - vertical accordion navigation menujquery - 垂直手风琴导航菜单
【发布时间】：2013-11-25 19:18:13
【问题描述】：

我有像侧边栏导航这样的垂直手风琴。一切正常，但我在使用Twitter Bootstrap 3 的图标时遇到了一些问题。

这是FIDDLE。

当我展开列表项时，我希望图标朝下，当我再次单击时，它不会折叠。我还希望将图标更改为左向chevron 图标。

还请帮助我添加过渡到它，就像它即将展开时一样，我希望它从左到下进行动画处理。

而且我也只能在单击文本时展开菜单。我无法对整行这样做。

提前致谢。

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案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');
    }
};

【讨论】：

非常感谢。我不知道如何使用 jquery 来做到这一点。现在我有了这个，我可以坚持下去，让它变得更好。再次感谢您.. +1 投票 :)
你能告诉我这个$('i', li)选择器是什么意思吗？
意思是“在li元素下搜索i元素”。这样，选择器将只找到作为指定 li 元素的子元素的 <i> 元素。详情请查看this 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>');
    }
 });
}); });

【讨论】：