【4】自定义下拉框

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_33690367

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量49

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tangiguo/p/6913170.html

本文介绍了一个使用HTML、CSS及jQuery实现的简单下拉框效果案例。通过自定义样式和交互逻辑，实现了下拉菜单的显示与隐藏，并允许用户选择不同的选项。此案例适用于初学者了解基本的网页元素交互原理。

<!DOCTYPE html>

<head>

<title>模拟下拉框</title>

<style>

* {margin:0;padding:0}
ul,li {list-style:none;}
.selectTotal {width:200px;position:relative;font-size:12px;}
.selectText {height:100%;line-height:40px;padding-left:10px;border:1px solid #c1c1c1;}
.selectLi {height:28px;line-height:28px;padding-left:10px;}
.selectLi:hover {background:#ff5d5b;color:white;}
.selectLiLast {border-bottom:none;}
.selectUl {border:1px solid #c1c1c1;border-top:none;display:none;position:absolute;top:42px;left:0;width:198px;}
.arrow {position:absolute;top:19px;right:10px;height:6px;}

</style>

</head>

</ul>

</div>

</body>

$(".selectText,.arrow").click(function (ev) {

ev.stopPropagation();

var ul = $(".selectUl");

if (ul.css("display") == "none") {

ul.slideDown("fast");