废话少说直接上代码
<!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; }
.tree {
color:
#46CFB0;
float:
left}
.tree
li,
.tree
li
>
a,
.tree
li
>
span {
margin:
2px;
border-radius:
4px;
}
.tree
li {
color:
#46CFB0;
text-decoration:
none;
line-height:
20pt;
border-radius:
4px;
}
.active1 {
background-color:
#34495E;
color:
white;
}
.active1
a {
color:
#fff;
}
.tree{
width:
166.5px;
height:
300px;
overflow-y:
auto;
border:
1px
solid
black;
}
.ul-ul-ul-ul{
width:
166.5px;
height:
300px;
overflow-y:
auto;
border:
1px
solid
black;
float:
left;
margin-left:
40px;
}
<
/style>
</head>
<body>
<ul class=
"tree"
>
<li> 一级
<ul class=
"ul-li-ul-li"
>
<li> Contact
</li>
<li> Blog
</li>
<li> Jobs
</li>
</ul>
</li>
<li> 一级
<ul class=
"ul-li-ul-li"
>
<li> file
</li>
<li> view
</li>
<li> code
</li>
</ul>
</li>
<li> 一级
<ul class=
"ul-li-ul-li"
>
<li> tools
</li>
<li> vcs
</li>
<li> help
</li>
</ul>
</li>
<li> 一级
<ul class=
"ul-li-ul-li"
>
<li> js
</li>
<li> css
</li>
<li> html
</li>
</ul>
</li>
</ul>
<ul class=
"ul-ul-ul-ul"
>
</ul>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js "
></script>
<script src=
"jquery.treemenu.js"
></script>
<script>
$(
function(){
$(
".tree")
.treemenu({delay:
300})
.openActive();
});
<
/script>
<script>
$(
'.ul-li-ul-li')
.on(
"click",
"li",
function(){
console
.log(
$(
this)
.parents(
'.treemenu > li')
.index())
var
index
=
$(
this)
.parents(
'.treemenu > li')
.index()
$(
this)
.attr(
"data_id",
index)
console
.log(
$(
this)
.attr(
"data_id"))
$(
this)
.remove()
$(
".ul-ul-ul-ul")
.append(
$(
this))
});
$(
'.ul-ul-ul-ul')
.on(
"click",
"li",
function(){
console
.log(
$(
this)
.attr(
"data_id"))
$(
".ul-li-ul-li")
.eq(
$(
this)
.attr(
"data_id"))
.append(
$(
this))
})
<
/script>
</body>
</html>
jquery.treemenu.js
(
function(
$){
$.
fn.
openActive
=
function(
activeSel) {
activeSel
=
activeSel
||
".active1";
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);
jquery.treemenu.css
.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
"; }
<script src="https://code.jquery.com/jquery-3.3.1.min.js "></script>