HTML:
<div class="st_tree">
<ul class="housebox">
<li class="parent"><a href="#" ref="unit">磁带生成单位</a></li>
<ul show="true">
<li><a href="#" ref="kw">科委</a></li>
<li><a href="#" ref="nw">农委</a></li>
<li><a href="#" ref="jw">纪委</a></li>
</ul>
<li class="parent"><a href="#" class="house">库房</a></li>
<ul class="ul_son">
<li><a href="#" ref="num1">一柜</a></li>
<ul class="ul_son1">
<li><a href="#" ref="num1_1">一排</a></li>
<li><a href="#" ref="num1_2">二排</a></li>
<li><a href="#" ref="num1_3">三排</a></li>
</ul>
<li><a href="#" ref="num2">二柜</a></li>
<ul class="ul_son2">
<li><a href="#" ref="num2_1">一排</a></li>
<li><a href="#" ref="num2_2">二排</a></li>
<li><a href="#" ref="num2_3">三排</a></li>
</ul>
<li><a href="#" ref="num3">三柜</a></li>
<ul class="ul_son3">
<li><a href="#" ref="num3_1">一排</a></li>
<li><a href="#" ref="num3_2">二排</a></li>
<li><a href="#" ref="num3_3">三排</a></li>
</ul>
</ul>
</ul>
</div>
js:
//单位库房的生成-鼠标移过的背景
$('.st_tree .ul_son1 li a').each(function () {
var html = $(this).html();
$(this).click(function () {
//除当前选择,其它全部移除背景
$('.st_tree .ul_son1 li a').each(function () {
var undeline1 = $(this).html();
if (html == undeline1) {
$(this).parent().addClass("tree_bg");
// $('.ul_son2 a').removeClass('nobg');
} else {
$(this).parent().removeClass("tree_bg");
}
})
})
});
$('.st_tree .ul_son2 li a').each(function () {
var html = $(this).html();
$(this).click(function () {
//除当前选择,其它全部移除背景
$('.st_tree .ul_son2 li a').each(function () {
var undeline2 = $(this).html();
if (html == undeline2) {
$(this).parent().addClass("tree_bg");
} else {
$(this).parent().removeClass("tree_bg");
}
})
})
});
$('.st_tree .ul_son3 li a').each(function () {
var html = $(this).html();
$(this).click(function () {
//除当前选择,其它全部移除背景
$('.st_tree .ul_son3 li a').each(function () {
var undeline3 = $(this).html();
if (html == undeline3) {
$(this).parent().addClass("tree_bg");
} else {
$(this).parent().removeClass("tree_bg");
}
})
})
})
});
css:
.st_tree{
width:21.18%;
border:1px solid #6CB3E3;
top:8.2%;
margin-left:10.12%;
position:absolute;
float:left;
overflow:auto;
overflow-x:scroll;
}
.st_tree a{
text-decoration:none;
color:#000;
font-family:"黑体";
font-size:0.875em;
}
.st_tree a:hover{
color:#1F90D5;
text-decoration:underline;
}
.st_tree a:active{
color:#000;
text-decoration:none;
}
.st_tree a:checked{
color:#000;
text-decoration:underline;
}
.st_tree .housebox{
width:100%;
}
.st_tree ul{
width:100%;
padding:0 18px;
margin:0;
}
.housebox li{
font-size:0.875em;
color:#000;
line-height:18px;
cursor:pointer;
list-style:none;
}
/*2级*/
.housebox ul{
padding:0 28px;
}
/*1级*/
.parent{
background:url('../img/select_down.png') no-repeat 0% 70%;
padding-top:5%;
}
.parent a{
padding-left:10%;
}
/* 子菜单 */
.st_tree ul li ul{}
/* 子菜单项 */
.st_tree ul li ul li{}
.housebox{
padding:0 !important;
}
/* 子菜单的父节点 */
.st_tree .folder{
list-style-image:url(img/select_down2.png);
background-repeat:no-repeat;
padding:0 0 0 10px;
background:url(../img/select_down.png) no-repeat 5% 60%;
}
/* 展开的父节点 */
.st_tree .open{
list-style-image:url(img/select_down.png) ;
background-repeat:no-repeat;
padding:0 0 0 10px;
background:url(../img/select_down2.png)no-repeat 5% 60%;
}
.ul_son .folder{
list-style-image:url(img/select_down2.png);
background-repeat:no-repeat;
background:url(../img/select_down.png) no-repeat 5% 60%;
padding:0 0 0 20px;
}
.ul_son .open{
list-style-image:url(img/select_down.png) ;
background-repeat:no-repeat;
padding:0 0 0 20px;
background:url(../img/select_down2.png)no-repeat 5% 60%;
}
.tree_bg{
text-decoration:underline;
}
.nobg{
text-decoration:none;
}
.st_tree li a{
text-overflow:ellipsis;word-break:keep-all; white-space:nowrap;
}