jQuery实现点击菜单出现更多操作下拉框

首先在页面添加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隐藏

转载于:https://my.oschina.net/huiger/blog/89454

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值