首先在页面添加JQuery的引用:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
其次添加CSS属性:
div.dropdown{height:23px;background:none;margin:0;width:200px;}
.dropdown{outline:none;}
decoration:underline;color: #666;}
.dropdown ul{position:absolute;background:#FFFFFF; _background-attachment:fixed;width:170px;padding-top:10px;display:none;margin:0;padding:0;overflow:auto;height:145px;}
.dropdown ul li{width:145px;margin:0;margin-left:2px;}
.dropdown ul li{background:#FFF;height:19px;display:block;cursor:pointer;font:400 11px/19px Arial,Helvetica,sans-serif;margin:0 0 6px 3px; background:none;}
.dropdown ul li.over{background:#FAFAAF;}
.dropdown ul li img {margin-right:4px;}
然后在要添加效果的地方添加:
<div id="div_currency" class="dropdown" >
<span >
<a title="编辑" href="javascript:;" id="bianji_" οnclick="">编辑</a>
</span>
<span class="mod_arr" title="更多操作" id="useredit_more_"><img alt="更多操作" src="../images/page/more.gif" style="margin-bottom: -5px;margin-left:-2px;" /></span>
<ul style="display: none">
<li id="more_options_del" title="删除用户" style="margin-top:5px;">
<a href="javascript:void(0)" οnclick="removedata()">删除用户</a>
</li>
<li id="more_options_res" title="重置密码">
<a href="javascript:void(0)" οnclick="resetPwd()">重置密码</a>
</li>
<li id="more_options_menu" title="门户权限">
<a href="InsidetoSYaction.action?userId=<struts:property value="#user.fldUserid"/>">门户权限</a>
</li>
<li id="more_options_serv" title="服务权限">
<a href="InsidetoWEBaction.action?userId=<struts:property value="#user.fldUserid"/>">服务权限</a>
</li>
</ul>
</div>
然后添加JavaScript代码:
$(function(){
$(".mod_arr").click(function(){
$(this).next().toggle();
});
$("#div_currency").bind("blur",function(){
$("#div_currency ul").hide();
return false;
});
$("#div_currency li").hover(function(){
$(this).addClass("over");
},function(){
$(this).removeClass("over");
}).click(function(){
$("#div_currency ul").hide();
});
});
说明:在用户点击倒三角标签的时候,加载JS方法,将隐藏的UL显示出来,点击了里面的<li>标签之后将UL隐藏