【jQuery】用DIV层模拟下拉列表

最新推荐文章于 2020-12-03 05:00:32 发布

原创最新推荐文章于 2020-12-03 05:00:32 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #div #border #function #url

CSS+DIV 同时被 2 个专栏收录

17 篇文章

订阅专栏

jQuery

1 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的自定义下拉菜单效果。通过CSS样式和jQuery事件监听，可以创建一个美观且交互良好的下拉选择框。该实现包括了鼠标点击任意位置关闭下拉菜单的功能，并能在选中项时更新显示文本。

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

实现的效果图如下：

代码：

样式：

.SelectTitle{display:block; color:#466b95; text-decoration:none; line-height:15px; padding:3px 20px 3px 3px; padding:4px 20px 2px 3px/9; background:url(../images/manage/ion.gif) right -602px no-repeat #fff; width:117px; border:1px solid #a4a4a4;} .SelectBox{border:1px solid #a4a4a4; position:absolute; background:#fff; margin:-1px 0 0; _margin:-1px 0 0 3px;} .SelectBox a{display:block; width:132px; height:13px; line-height:13px; margin:0; border:0; padding:4px; padding:6px 4px 2px/9; text-decoration:none; color:#466b95;} .SelectBox a:hover{border:0; background:#e0e5eb;}

对照图

jQuery

//任意位置点击，隐藏下拉层 $(document).bind('click', function(e) { var clickme = $(e.target); if (!clickme.hasClass("SelectTitle")) { $(".SelectBox").hide(); //在不是列表输入区域单击时（有可能是空白区或者下拉列表中单击） if (clickme.parent().hasClass("SelectBox")) { //在下拉列表中单击时执行 clickme.parent().prev().html(clickme.html()); clickme.parent().prev().attr("attrid", clickme.attr("attrid")); } } } else { $(".SelectBox").hide(); //先全体隐藏，再显示点中的下拉列表层 clickme.next().show(); } });