【发布时间】：2016-01-06 18:27:40
【问题描述】：
我是新来的。我从一个站点下载了 AdminEx 引导主题，我发现该主题没有多级菜单。但我需要同样的。我在这里附上了侧边栏 HTML 和 JS 脚本。请帮助我构建它。
HTML 代码 [如主题]：
<ul class="nav nav-pills nav-stacked custom-nav">
<li><a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
<li class="menu-list"><a href=""><i class="fa fa-laptop"></i> <span>Layouts</span></a>
<ul class="sub-menu-list">
<li><a href="blank_page.html"> Blank Page</a></li>
<li><a href="boxed_view.html"> Boxed Page</a></li>
<li><a href="leftmenu_collapsed_view.html"> Sidebar Collapsed</a></li>
<li><a href="horizontal_menu.html"> Horizontal Menu</a></li>
</ul>
</li>
<li class="menu-list"><a href=""><i class="fa fa-book"></i> <span>UI Elements</span></a>
<ul class="sub-menu-list">
<li><a href="general.html"> General</a></li>
<li><a href="buttons.html"> Buttons</a></li>
<li><a href="tabs-accordions.html"> Tabs & Accordions</a></li>
<li><a href="typography.html"> Typography</a></li>
<li><a href="slider.html"> Slider</a></li>
<li><a href="panels.html"> Panels</a></li>
<li><a href="widgets.html"> Widgets</a></li>
</ul>
</li>
</ul>
我想要具有相同可折叠效果的多层次，例如：
<ul class="nav nav-pills nav-stacked custom-nav">
<li><a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
<li class="menu-list"><a href="#"><i class="fa fa-book"></i> <span>UI Elements</span></a>
<ul class="sub-menu-list">
<li><a href="#">General</a></li>
<li>
<a href="#">Buttons</a>
<ul>
<li><a href="#">Color Buttons</a></li>
<li><a href="#">Image Buttons</a></li>
</ul>
</li>
</ul>
</li>
</ul>
我尝试在theme(script.js)中查找JS代码：
(function() {
"use strict";
// custom scrollbar
$("html").niceScroll({styler:"fb",cursorcolor:"#65cea7", cursorwidth: '6', cursorborderradius: '0px', background: '#424f63', spacebarenabled:false, cursorborder: '0', zindex: '1000'});
$(".left-side").niceScroll({styler:"fb",cursorcolor:"#65cea7", cursorwidth: '3', cursorborderradius: '0px', background: '#424f63', spacebarenabled:false, cursorborder: '0'});
$(".left-side").getNiceScroll();
if ($('body').hasClass('left-side-collapsed')) {
$(".left-side").getNiceScroll().hide();
}
// Toggle Left Menu
jQuery('.menu-list > a').click(function() {
var parent = jQuery(this).parent();
var sub = parent.find('> ul');
if(!jQuery('body').hasClass('left-side-collapsed')) {
if(sub.is(':visible')) {
sub.slideUp(200, function(){
parent.removeClass('nav-active');
jQuery('.main-content').css({height: ''});
mainContentHeightAdjust();
});
} else {
visibleSubMenuClose();
parent.addClass('nav-active');
sub.slideDown(200, function(){
mainContentHeightAdjust();
});
}
}
return false;
});
function visibleSubMenuClose() {
jQuery('.menu-list').each(function() {
var t = jQuery(this);
if(t.hasClass('nav-active')) {
t.find('> ul').slideUp(200, function(){
t.removeClass('nav-active');
});
}
});
}
function mainContentHeightAdjust() {
// Adjust main content height
var docHeight = jQuery(document).height();
if(docHeight > jQuery('.main-content').height())
jQuery('.main-content').height(docHeight);
}
// class add mouse hover
jQuery('.custom-nav > li').hover(function(){
jQuery(this).addClass('nav-hover');
}, function(){
jQuery(this).removeClass('nav-hover');
});
// Menu Toggle
jQuery('.toggle-btn').click(function(){
$(".left-side").getNiceScroll().hide();
if ($('body').hasClass('left-side-collapsed')) {
$(".left-side").getNiceScroll().hide();
}
var body = jQuery('body');
var bodyposition = body.css('position');
if(bodyposition != 'relative') {
if(!body.hasClass('left-side-collapsed')) {
body.addClass('left-side-collapsed');
jQuery('.custom-nav ul').attr('style','');
jQuery(this).addClass('menu-collapsed');
} else {
body.removeClass('left-side-collapsed chat-view');
jQuery('.custom-nav li.active ul').css({display: 'block'});
jQuery(this).removeClass('menu-collapsed');
}
} else {
if(body.hasClass('left-side-show'))
body.removeClass('left-side-show');
else
body.addClass('left-side-show');
mainContentHeightAdjust();
}
});
searchform_reposition();
jQuery(window).resize(function(){
if(jQuery('body').css('position') == 'relative') {
jQuery('body').removeClass('left-side-collapsed');
} else {
jQuery('body').css({left: '', marginRight: ''});
}
searchform_reposition();
});
function searchform_reposition() {
if(jQuery('.searchform').css('position') == 'relative') {
jQuery('.searchform').insertBefore('.left-side-inner .logged-user');
} else {
jQuery('.searchform').insertBefore('.menu-right');
}
}
// panel collapsible
$('.panel .tools .fa').click(function () {
var el = $(this).parents(".panel").children(".panel-body");
if ($(this).hasClass("fa-chevron-down")) {
$(this).removeClass("fa-chevron-down").addClass("fa-chevron-up");
el.slideUp(200);
} else {
$(this).removeClass("fa-chevron-up").addClass("fa-chevron-down");
el.slideDown(200); }
});
$('.todo-check label').click(function () {
$(this).parents('li').children('.todo-title').toggleClass('line-through');
});
$(document).on('click', '.todo-remove', function () {
$(this).closest("li").remove();
return false;
});
$("#sortable-todo").sortable();
// panel close
$('.panel .tools .fa-times').click(function () {
$(this).parents(".panel").parent().remove();
});
// tool tips
$('.tooltips').tooltip();
// popovers
$('.popovers').popover();
})(jQuery);
主题直播网址：http://themeforest.net/item/adminex-bootstrap-3-responsive-admin-template/7399319
我认为可以通过 jquery 来实现。 请帮助建立相同的。谢谢你。
【问题讨论】：
标签： javascript jquery css twitter-bootstrap