废话少说直接上代码
"utf-8"
>
jQuery轻量级树状菜单插件代码
"jquery.treemenu.css"
rel=
"stylesheet"
type=
"text/css"
>
* {
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>
一级
Contact
Blog
Jobs
一级
file
view
code
一级
tools
vcs
help
一级
js
css
html
$ (
function (){
$ (
".tree" )
.treemenu ({delay:
300 })
.openActive ();
});
<
/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>
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
=
$ (
'' );
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
" ; }