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

最新推荐文章于 2022-10-11 10:49:25 发布

转载最新推荐文章于 2022-10-11 10:49:25 发布 · 679 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/huiger/blog/89454

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery实现的动态下拉菜单效果。通过简单的HTML结构配合jQuery和CSS样式，实现了点击展示和隐藏菜单的功能，并附带了完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

首先在页面添加JQuery的引用：

其次添加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;}

然后在要添加效果的地方添加：

然后添加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();
});