垂直手风琴导航菜单
我有像侧栏导航这样的垂直手风琴。 一切工作正常，但我正面临着一些问题与我从Twitter Bootstrap 3使用它的图标。
这是FIDDLE 。
当我展开一个列表项时，我希望图标朝下，当我再次单击它时，它不会折叠。 而且我还希望将图标更改为左面chevron图标。
另外，请帮助我添加过渡效果，就像它即将展开时那样，我希望从面朝左到朝下的动画效果。
而且，只有当我点击文字时，我才能展开菜单。 我无法做到这一点。
提前致谢。
我想我设法实现了你之后的事情：这就是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');
}
};
检查下面的代码
$(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>');
}
});
}); });