Question

JSP 要怎么做成这样的下拉菜单

Answer 1

html:

<div class="leftpart">
<div class="tree">
<p class="tree-title"><em class="down"></em>sadasd</p>
<ul class="tree-main on">
<li><em class=" "></em>192.168.1.111</li>
<li><em></em>192.168.1.112</li>
</ul>
</div>
<div class="tree">
<p class="tree-title"><em class="down"></em>asda</p>
<ul class="tree-main">
<li><em></em>192.168.1.121</li>
<li><em></em>192.168.1.122</li>
</ul>
</div>
</div>
css:
.tree-title{
padding: 7px 10px;
cursor:pointer;
}
.tree-title:hover{
background:#f5f5f5;
}
.tree-title em,.tree-main li em{
display: inline-block;
width: 14px;
height: 14px;
margin-right: 5px;
}
.tree-title em.down{
background: url(../images/down.png) center no-repeat;
-webkit-background-size: 14px;
background-size: 14px;
}
.tree-title em.right{
background: url(../images/ico-right.png) center no-repeat;
-webkit-background-size: 14px;
background-size: 14px;
}
.tree-main{
padding-left: 20px;
}
.tree-main li{
padding: 3px 10px;
font-size: 12px;
cursor:pointer;
}
.tree-main{
display: none;
}
.tree-main.on{
display: block;
}
JS:
$('p.tree-title').click(function(){
if($(this).children('em').hasClass('down')){
$(this).children('em').removeClass('down').addClass('right');
}else{
$(this).children('em').removeClass('right').addClass('down');
}
$(this).parent().children('ul').toggleClass('on');
});