[英]jquery - vertical accordion navigation menu
I have this vertical accordion like side bar navigation. 我有这种垂直手风琴,如侧栏导航。 Everything is working fine but the i'm facing some problem with the icons that i'm using it from Twitter Bootstrap 3
. 一切正常,但我正在使用Twitter Bootstrap 3
使用它的图标面临一些问题。
Here's the FIDDLE . 这是FIDDLE 。
When I expand the a list item i want to the icon to be facing down and when I click again it's not getting collapsed. 当我展开列表项时,我希望图标面朝下,当我再次点击它时,它不会被折叠。 And also I want the icon to be changed to left facing chevron
icon. 此外,我希望将图标更改为左侧的chevron
图标。
Also please help me in adding transition to it like when it's about to expand I want that to be animated from facing left to down. 另外,请帮助我添加过渡到它,就像它要扩展我想要从左到右动画。
And also I can expand the menu only when I click on the text. 我也可以在单击文本时展开菜单。 I couldn't do that to the entire row. 我无法做到整行。
Thanks in advance. 提前致谢。
I think I managed to implement what you were after: Here's the FIDDLE 我想我设法实现你所追求的:这是FIDDLE
Here's the main JS function. 这是主要的JS功能。 It's a little untidy but the basic functionality is there. 它有点不整洁,但基本功能就在那里。 You can fix it as you want. 您可以根据需要修复它。
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');
}
};
Check this below code 请检查以下代码
$(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>');
}
});
}); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.