Закрыть селект при клике на другой селект
Есть два стилизованных селекта, работают при помощи jquery. Проблема в том что когда щелкаешь по одному селекту и потом по другому, то оба остаются открытыми, хотя по идее, первый должен закрываться
http://skrinshoter.ru/s/050618/VTcKiOLu Как решить эту проблему? Хочу отметить, что я привязываю дата-атрибуты к js, а не классы или что то еще. Поэтому мне нужно прописать это решение с помощью дата атрибутов https://codepen.io/anon/pen/GGZmxz |
yaparoff,
https://codepen.io/anon/pen/vrGZeY |
yaparoff,
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<style class="cp-pen-styles">
.store-list__form {
max-width: 630px;
margin: 0 auto 40px;
}
.store-list__select {
width: 100%;
max-width: 370px;
height: 40px;
cursor: pointer;
max-width: 300px;
display: inline-block;
}
.store-list__select select {
display: none;
}
.store-list__select-container {
width: 100%;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 13px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid #ddd;
}
.store-list__select-default-param {
display: block;
height: 40px;
line-height: 40px;
border-radius: 0;
background-color: rgba(32, 52, 128, 0.01);
transition: all .2s ease-out;
padding: 0 50px 0 10px;
color: #4a4a4a;
}
.store-list__select-default-param span {
display: block;
overflow: hidden;
margin-right: 26px;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
.store-list__select-arrow {
position: absolute;
top: 0;
right: 0;
display: block;
height: 40px;
width: 40px;
border-left: 1px solid #ddd;
background-color: #fff;
}
.store-list__select-arrow i {
position: absolute;
border: 0;
border-right: 1px solid #4a4a4a;
border-bottom: 1px solid #4a4a4a;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
margin-top: -5px;
margin-left: -3px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.store-list__select-arrow--opened i {
margin-top: 0;
transform: rotate(-135deg);
}
.store-list__select-arrow[data-open="true"] i {
margin-top: 0;
transform: rotate(-135deg);
}
.store-list__select-list {
position: absolute;
top: 100%;
left: -9999px;
z-index: 1010;
width: 100%;
border-top: 0;
background: #fff;
border: 1px solid #ddd;
margin-top: -1px;
background-clip: padding-box;
color: #444;
overflow-x: hidden;
overflow-y: auto;
padding: 15px 0;
margin: 0;
max-height: 240px;
}
.store-list__select-list--opened {
left: 0;
}
.store-list__select-list[data-open="true"] {
left: 0;
visibility: visible;
}
.store-list__select-list-item {
position: relative;
padding: 5px 10px;
font-size: 14px;
color: #272727;
line-height: 18px;
transition: color .2s ease-out;
word-wrap: break-word;
cursor: pointer;
}
.store-list__select-list-item:hover:after, .store-list__select-list-item--selected:after {
content: '';
position: absolute;
width: 7px;
height: 12px;
right: 15px;
top: 50%;
margin-top: -7px;
border-right: 2px solid #272727;
border-bottom: 2px solid #272727;
transform: rotate(45deg);
}
.store-list__select:first-child {
margin-right: 25px;
}
</style></head><body>
<div class="store-list__form">
<div class="store-list__select" data-select="select">
<select data-placeholder="Выберите город">
<option value="">Выберите город</option>
<option value="moscow">Москва</option>
<option value="spb">Санкт-Петербург</option>
</select>
<div class="store-list__select-container">
<a class="store-list__select-default-param">
<span data-select="select-title">Выберите город</span>
<div class="store-list__select-arrow" data-select="select-arrow">
<i></i>
</div>
</a>
<div class="store-list__select-list" data-select="select-list">
<div class="store-list__select-list-item" data-select="select-item">Выберите город</div>
<div class="store-list__select-list-item" data-select="select-item">Москва</div>
<div class="store-list__select-list-item" data-select="select-item">Санкт-Петербург</div>
</div>
</div>
</div>
<div class="store-list__select" data-select="select">
<select data-placeholder="Выберите станцию метро">
<option value="">Выберите станцию метро</option>
<option value="station1">Манежная пл</option>
<option value="station2">Манежная пл2</option>
</select>
<div class="store-list__select-container">
<a class="store-list__select-default-param">
<span data-select="select-title">Выберите станцию метро</span>
<div class="store-list__select-arrow" data-select="select-arrow">
<i></i>
</div>
</a>
<div class="store-list__select-list" data-select="select-list">
<div class="store-list__select-list-item" data-select="select-item">Выберите станцию метро</div>
<div class="store-list__select-list-item" data-select="select-item">Манежная пл</div>
<div class="store-list__select-list-item" data-select="select-item">Манежная пл2</div>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<script >
$(function() {
var select = $('[data-select="select"]');
select.on("click", function(event) {
var el = $(event.target);
var selectList = $('[data-select="select-list"]', this);
var selectItem = $('[data-select="select-item"]', this);
var selectArrow = $('[data-select="select-arrow"]', this);
var index = selectItem.index(el);
var text = el.text();
var title = $('[data-select="select-title"]', this);
var tagSelect = $("select", this)[0];
if (index > -1) {
title.text(text);
tagSelect.selectedIndex = index
}
if (selectList.is("[data-open]")) up();
else {
up();
selectList.attr("data-open", "true");
selectArrow.attr("data-open", "true")
}
});
function up() {
$("[data-open]").removeAttr("data-open")
}
$(document).click(function(event) {
if (!$(event.target).closest(select).length) up()
})
});
</script>
</body></html>
|
:( ready in ready, click in click ... браузер кирдык! :)
|
| Часовой пояс GMT +3, время: 02:18. |