Есть скрипт(кастомный список). Мне нужно чтобы, он срабатывал для нескольких списков. Но при нажатии на choose скрипт срабатывает для всех списков. Т.е. выпадают все списки.
$('.choose').on('click', function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$('.list').hide();
} else {
$(this).addClass('active');
$('.list').show();
}
});
$('.option').on('click', function() {
var option_val = $(this).html()
$('.choose').html(option_val)
$('input:text').val(option_val);
$('.list').hide();
});
* {
margin: 0;
padding: 0;
}
body {
background-color: #ccc;
}
.white-triangle-down {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
border: 6px solid transparent;
border-top: 10px solid #fff;
}
.select {
position: relative;
width: 170px;
border: 1px solid #000;
margin: 20px auto 0 auto;
}
.select p {
cursor: pointer;
font-size: 18px;
}
ul.list {
display: none;
border-top: 1px solid #000;
}
ul.list li:hover {
cursor: pointer;
background-color: #fff;
}
input[name="select-mod"] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select">
<p class="choose">Выберете статус</p>
<div class="white-triangle-down"></div>
<ul class="list">
<li class="option" id="first">
Статус1
</li>
<li class="option" id="second">
Статус2
</li>
<li class="option" id="third">
Статус3
</li>
</ul>
<input type="text" name="select-mod" id="select-mod">
</div>
<div class="select">
<p class="choose">Выберете пункт</p>
<div class="white-triangle-down"></div>
<ul class="list">
<li class="option" id="first">
Пункт1
</li>
<li class="option" id="second">
Пункт2
</li>
<li class="option" id="third">
Пункт3
</li>
</ul>
<input type="text" name="select-mod" id="select-mod">
</div>