我有这个垂直手风琴像侧栏导航。一切工作正常,但我正面临一些问题,我使用它从Twitter Bootstrap 3
它的图标。jquery - 垂直手风琴导航菜单
这里的FIDDLE。
当我展开我想对于图标的列表项目朝下,当我再次单击它没有得到崩溃。并且我还希望将图标更改为面向chevron
图标。
也请帮我在想,当它要扩大我想要从朝左向下动画添加过渡到它。
而且我只能在点击文本时才能展开菜单。我无法做到这一点。
在此先感谢。
我有这个垂直手风琴像侧栏导航。一切工作正常,但我正面临一些问题,我使用它从Twitter Bootstrap 3
它的图标。jquery - 垂直手风琴导航菜单
这里的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>');
}
});
}); });
非常感谢。我不知道如何使用jQuery来做到这一点。现在我已经掌握了这一点,我可以坚持下去,让它变得更好。再次感谢你.. +1投票:) –
你能说我这是什么'$('i',li)'选择器是什么意思? –
这意味着“在*元素下搜索'i'元素*”。这样,选择器将只能找到''元素,它是指定'li'元素的子元素。查看[这个答案](http://stackoverflow.com/a/306904/36938)了解详情。 –