0

Есть скрипт(кастомный список). Мне нужно чтобы, он срабатывал для нескольких списков. Но при нажатии на 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>

1 ответ 1

1

$('.choose').on('click', function() {
  $(this).toggleClass('active').siblings('.list').toggle();
});

$('.option').on('click', function() {
  var option_val = $(this).text();
  $(this)
    .parent('.list')
    .hide()
    .siblings('.choose').text(option_val)
    .siblings(':text').val(option_val);
});
* {
  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>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.