Javascript jquery-垂直手风琴导航菜单

我有这个垂直的手风琴一样的侧栏导航。一切都很好，但是我在Twitter Bootstrap 3中使用的图标出现了一些问题

这是我的建议

当我展开a列表项时，我希望图标面朝下，当我再次单击时，它不会折叠。我还想把图标改成左向的

chevron

图标

另外，请帮助我添加过渡到它喜欢当它即将扩大，我想这是动画从面向左向下

而且我只能在点击文本时才能展开菜单。我不能对整排人都这么做

---

提前谢谢。

我想我已经实现了你的目标：以下是

这里是主要的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');
    }
};

---

我想我成功地实现了你的目标：以下是

这里是主要的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');
    }
};

检查下面的代码

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

$（窗口）.load（函数（）{
$（文档）.ready（函数（）{
$（'.sidebar ul li a'）。单击（函数（ev）{
//$（'.sidebar.sub-menu'）.not（$（this.parents（'.sub-menu'））.slideUp（）；
$（this）.next（'.sub菜单'）.slideToggle（）；
ev.stopPropagation（）；
if（$（this.find（“i”）.hasClass（'glyphicon-chevron-left'））{
$（this.find（“i”）.remove（）；
$（此）。附加（“”）；
}否则{
$（this.find（“i”）.remove（）；
$（此）。附加（“”）；
}
});
}); });

检查以下代码

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

$（窗口）.load（函数（）{
$（文档）.ready（函数（）{
$（'.sidebar ul li a'）。单击（函数（ev）{
//$（'.sidebar.sub-menu'）.not（$（this.parents（'.sub-menu'））.slideUp（）；
$（this）.next（'.sub菜单'）.slideToggle（）；
ev.stopPropagation（）；
if（$（this.find（“i”）.hasClass（'glyphicon-chevron-left'））{
$（this.find（“i”）.remove（）；
$（此）。附加（“”）；
}否则{
$（this.find（“i”）.remove（）；
$（此）。附加（“”）；
}
});
}); });

非常感谢。我不知道如何使用jquery来实现它。现在我有了这个，我可以坚持下去，让它变得更好。再次感谢你+1票：）你能告诉我这个

$（'i'，li）

选择器是什么意思吗？它的意思是“在li元素下搜索

i

元素”。这样，选择器将只查找作为指定

li

元素的子元素的

元素。查看详细信息。非常感谢。我不知道如何使用jquery来实现它。现在我有了这个，我可以坚持下去，让它变得更好。再次感谢你+1票：）你能告诉我这个

$（'i'，li）

选择器是什么意思吗？它的意思是“在li元素下搜索

i

元素”。这样，选择器将只查找作为指定

li

元素的子元素的

元素。查看详细信息。