Как сделать простой select?
Здравствуйте. Пытаюсь сделать простой свой select.
Работать должен так: Жмёшь на него -> появляется список Выбираешь пункт списка -> список закрывается Жмёшь вне списка -> список закрывается Жму на открытый селект снова -> список закрывается А у меня вот так: Жму -> появляется Выбираю -> закрывается Жму вне -> закрывается Жму по открытому селекту -> закрывается и через секунду открывается Вот код: https://jsfiddle.net/34h8d3ut/2/ Как сделать, чтобы при клике по открытому селекту, но не закрывался-открывался, а просто закрывался? |
кастомизация селекта
drkrol,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.list-select{
display:none;
}
.a-select:hover, .a-select.active, .list-select:hover .a-select:hover.active {
background-color: #EAEAEA;
}
.list-select:hover .a-select.active{
background-color: transparent;
}
.a-select.active{
border: 1px dashed #000000;
}
.select {
position: relative;
height: 50px;
width: 240px;
border:1px solid #ccc;
cursor: pointer;
}
.list-select {
position: absolute;
width: 100%;
top: 51px;
z-index: 5;
background-color: #F0F8FF;
}
.text-select, .a-select {
border-radius: 8px;
line-height: 50px;
padding-left: 20px;
}
.select:nth-child(2){
margin-left: 300px;
margin-top: -54px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".select").on("click", function(event) {
var el = $(event.target),
list = $(".list-select", this),
a = $(".a-select", this).not(el),
txt = $(".text-select", this);
el.is(".a-select") && txt.text(el.addClass("active").text()) && a.removeClass("active");
list.slideToggle()
});
$(document).click(function(event) {
if (!$(event.target).closest(".select").length) $(".select .list-select").slideUp()
})
});
</script>
</head>
<body>
<div class="select">
<div class="text-select">Выбирай</div>
<div class="list-select ">
<div class="a-select">Первый</div>
<div class="a-select">Второй</div>
<div class="a-select">Третий</div>
</div>
</div>
<div class="select">
<div class="text-select">Выбирай</div>
<div class="list-select ">
<div class="a-select">Первый</div>
<div class="a-select">Второй</div>
<div class="a-select">Третий</div>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 04:40. |