jQuery轻量级树状菜单插件代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery轻量级树状菜单插件代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery轻量级树状菜单插件代码</title>
<link href="jquery.treemenu.css" rel="stylesheet" type="text/css">
<style>
*{list-style:none;border:none;}
body{font-family:Arial;background-color:#2C3E50;}
.tree {  color:#46CFB0;width:800px;margin:100px auto;}
.tree li,
.tree li > a,
.tree li > span {
    padding: 4pt;
    border-radius: 4px;
}

.tree li a {
   color:#46CFB0;
    text-decoration: none;
    line-height: 20pt;
    border-radius: 4px;
}

.tree li a:hover {
    background-color: #34BC9D;
    color: #fff;
}

.active {
    background-color: #34495E;
    color: white;
}

.active a {
    color: #fff;
}

.tree li a.active:hover {
    background-color: #34BC9D;
}
</style>
</head>

<body>
<ul class="tree">
  <li><a href="">Home</a></li>
  <li><span>Category</span>
    <ul>
      <li><a href="#">jQuery</a>
        <ul>
          <li><a href="#">jQuery</a></li>
          <li><a href="#">jQuery UI</a></li>
          <li><a href="#">jQuery Mobile</a></li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a class="active" href="#">AngularJS</a></li>
          <li><a href="#">React</a></li>
          <li><a href="#">Backbone</a></li>
        </ul>
      </li>
      <li><a href="#suits">Golang</a></li>
    </ul>
  </li>
  <li><a href="#about">About</a>
    <ul>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Jobs</a>
        <ul>
          <li><a href="#jobs1">Job 1</a></li>
          <li><a href="#jobs2">Job 2</a></li>
          <li><a href="#jobs3">Job 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<script src="jquery-1.11.2.min.js"></script> 
<script src="jquery.treemenu.js"></script> 
<script>
$(function(){
        $(".tree").treemenu({delay:300}).openActive();
    });
</script>
</body>
</html>

JS代码(jquery.treemenu.js):

/* treeMenu - jQuery plugin version:0.4 Copyright 2014 Stepan Krapivin*/
(function($){
	$.fn.openActive = function(activeSel){
	activeSel = activeSel || ".active";
	var c = this.attr("class");
	this.find(activeSel).each(function(){
	var el = $(this).parent();
	while (el.attr("class") !== c){
	if(el.prop("tagName") === 'UL'){
	el.show();
}
else if (el.prop("tagName") === 'LI'){
	el.removeClass('tree-closed');
	el.addClass("tree-opened");
}
el = el.parent();
}
}
);
	return this;
}
$.fn.treemenu = function(options){
	options = options ||{
}
;
	options.delay = options.delay || 0;
	options.openActive = options.openActive || false;
	options.activeSelector = options.activeSelector || "";
	this.addClass("treemenu");
	this.find("> li").each(function(){
	e = $(this);
	var subtree = e.find('> ul');
	var button = e.find('span').eq(0).addClass('toggler');
	if( button.length == 0){
	var button = $('<span>');
	button.addClass('toggler');
	e.prepend(button);
}
else{
	button.addClass('toggler');
}
if(subtree.length > 0){
	subtree.hide();
	e.addClass('tree-closed');
	e.find(button).click(function(){
	var li = $(this).parent('li');
	li.find('> ul').slideToggle(options.delay);
	li.toggleClass('tree-opened');
	li.toggleClass('tree-closed');
	li.toggleClass(options.activeSelector);
}
);
	$(this).find('> ul').treemenu(options);
}
else{
	$(this).addClass('tree-empty');
}
}
);
	if (options.openActive){
	this.openActive(options.activeSelector);
}
return this;
}
}
)(jQuery);

CSS代码(jquery.treemenu.css):

/* For treemenu.js */
.treemenu li{list-style:none;}
.treemenu .toggler{cursor:pointer;}
.treemenu .toggler:before{display:inline-block;margin-right:2pt;}
li.tree-empty > .toggler{color:#aaa;}
li.tree-empty > .toggler:before{content:"\2212";}
li.tree-closed > .toggler:before{content:"+";}
li.tree-opened > .toggler:before{content:"\2212";}

附件:下载该文件资源,减少时间成本(增值服务)