ul+jquery自定义精美下拉选择框
时间: 2023-07-29 20:09:04 浏览: 59
下面是一个基于ul和jquery的自定义下拉选择框的示例代码:
HTML代码:
```html
<div class="custom-select">
<div class="select-trigger">请选择</div>
<ul class="options">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
<li>选项四</li>
</ul>
</div>
```
CSS代码:
```css
.custom-select {
position: relative;
width: 200px;
height: 30px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
cursor: pointer;
}
.select-trigger {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 10px;
line-height: 30px;
font-size: 14px;
color: #333;
}
.options {
position: absolute;
top: 30px;
left: 0;
width: 100%;
max-height: 150px;
overflow-y: auto;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 4px 4px;
background-color: #fff;
z-index: 999;
}
.options li {
padding: 5px 10px;
font-size: 14px;
color: #333;
cursor: pointer;
}
.options li:hover {
background-color: #f5f5f5;
}
```
JavaScript代码:
```javascript
$(function() {
$('.custom-select').each(function() {
var $select = $(this).find('select');
var $trigger = $(this).find('.select-trigger');
var $options = $(this).find('.options');
var $lis = $options.find('li');
var selectedIndex = $select.prop('selectedIndex');
$trigger.text($lis.eq(selectedIndex).text());
$trigger.on('click', function() {
$options.slideToggle();
});
$lis.on('click', function() {
var index = $(this).index();
$select.prop('selectedIndex', index);
$trigger.text($(this).text());
$options.slideUp();
});
});
});
```
这段代码实现了一个简单的下拉选择框,当点击选择器时,选项列表会展开,点击列表中的选项后,选择器的显示文本会更新为所选选项的文本,同时选项列表会收起来。你可以根据自己的需要调整样式和JS代码来实现更加符合自己需求的下拉选择框。