这里给出一个简单的
实现，使用了jQuery和
CSS来
模拟下拉菜单效果。
HTML代码：
```
<div class="custom-
select">
<
select>
<option value="">请选择</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</
select>
</div>
```
CSS代码：
```
.custom-
select {
position: relative;
display: inline-block;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
color: #333;
}
.custom-
select select {
display: none;
}
.custom-
select::after {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
content: "\f107";
font-family: "FontAwesome";
font-size: 14px;
color: #999;
pointer-events: none;
}
.custom-
select.open::after {
content: "\f106";
color: #666;
}
.custom-
select-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
display: none;
max-height: 240px;
overflow-y: auto;
background-color: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.custom-
select.open .custom-
select-dropdown {
display: block;
}
.custom-
select-dropdown-option {
padding: 8px 12px;
font-size: 14px;
line-height: 1.5;
color: #333;
cursor: pointer;
}
.custom-
select-dropdown-option:hover {
background-color: #f5f5f5;
}
```
JavaScript代码：
```
$(document).on("click", function(e) {
var $target = $(e.target);
if ($target.closest(".custom-
select").length) {
$target.closest(".custom-
select").toggleClass("open");
} else {
$(".custom-
select").removeClass("open");
}
});
$(".custom-
select select").on("change", function() {
var text = $(this).find("option:
selected").text();
$(this).closest(".custom-
select").find(".custom-
select-text").text(text);
});
$(".custom-
select select").each(function() {
var $this = $(this),
numberOfOptions = $(this).children("option").length;
$this.addClass("s-hidden");
$this.wrap('<div class="custom-
select"></div>');
$this.after('<div class="custom-
select-text">' + $this.children("option").eq(0).text() + '</div>');
var $dropdown = $('<div class="custom-
select-dropdown"></div>');
for (var i = 0; i < numberOfOptions; i++) {
$dropdown.append('<div class="custom-
select-dropdown-option">' + $this.children("option").eq(i).text() + '</div>');
}
$this.after($dropdown);
});
```
这段代码的
实现原理是：
1. 隐藏原生的
下拉菜单，并在其外部包裹一个自定义的容器。
2. 在容器中添加一个显示当前选项的文本框，以及一个
下拉菜单容器。
3. 遍历所有选项，把它们添加到
下拉菜单容器中。
4. 绑定点击事件，让点击自定义
下拉菜单的容器时，切换
下拉菜单的显示状态。
5. 绑定
下拉菜单选项的点击事件，让其选中对应的选项，并更新文本框的内容。
504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
