jQuery: Показать / Скрыть меню

Question

Сверстал кнопку с выдвигающейся менюшкой. Проблема следующая: не могу настроить скрипт события в jQuery для того что бы при нажатии на .selectCityBtn выдвигалось меню и при повторном нажатии возвращала положение обратно. Какое событие можно использовать?

.btnOter {
    width: 364px;
    float: left;
    overflow: hidden;
    border: 1px solid red;
}

.selectCityBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    float: right;
    width: 364px;
    height: 40px;
    border: 1px solid #D5D5D5;
    box-sizing: border-box;
    border-radius: 4px;
    background: none;
    padding: 0 16px;
  }

.iconSelectCity{
    width: 9px;
    height: 5px;
    background: url("../img/vector.png") no-repeat;
    background-size: cover;
    transform: rotate(180deg);
}

.iconSelectCityOff {
    transform: rotate(0deg);
}

.menuDropdown {
    display: none;
    padding: 0 16px;
 }

.searchSelectCity {
    width: 332px;
    height: 40px;
    border: 1px solid #D5D5D5;
    box-sizing: border-box;
    border-radius: 4px;
    vertical-align: center;
    padding: 0 16px;
    margin-top: 16px;
}

.searchSelectCity ul {
    list-style-type: none;
    padding: 0;
}

.searchSelectCity ul li {
    margin-top: 20px;
}

.searchSelectCity ul li a {
    color: #000;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
}

.searchSelectCity ul li a:hover {
    text-decoration: none;
}

<div class="btnOter">
  <div class="selectCityBtn">
    <span class="textSelectCity">Выберите город</span>
    <img src="https://img.icons8.com/nolan/64/double-down.png" width="10"/>
  </div>
  
  <div class="menuDropdown">
    <input type="text" class="searchSelectCity" placeholder="Начните вводить название города">
    <ul>
      <li><a href="">Махачкала, респ. Дагестан</a></li>
       <li><a href="">Краснодар, Краснодарский край</a></li>
       <li><a href="">Ставрополь, Ставропольский край</a></li>
       <li><a href="">Астрахань, Астраханская область</a></li>
       <li><a href="">Нальчик, Кабардино-Балкарская Республика</a></li>
    </ul>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Заранее благодарю!

Answer 1

В jQuery есть встроенная функция .slideToggle()

$('.selectCityBtn').on('click', function() {
  $(this)
    .closest('.btnOter').eq(0)
    .find('.menuDropdown')
    .slideToggle();

  // Это с рассчетом на то, что их может быть нескольно. Иначе:
  // $('.menuDropdown').slideToggle();
});

.btnOter {
  width: 364px;
  float: left;
  overflow: hidden;
  border: 1px solid red;
}

.selectCityBtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  float: right;
  width: 364px;
  height: 40px;
  border: 1px solid #D5D5D5;
  box-sizing: border-box;
  border-radius: 4px;
  background: none;
  padding: 0 16px;
}

.iconSelectCity {
  width: 9px;
  height: 5px;
  background: url("../img/vector.png") no-repeat;
  background-size: cover;
  transform: rotate(180deg);
}

.iconSelectCityOff {
  transform: rotate(0deg);
}

.menuDropdown {
  display: none;
  padding: 0 16px;
}

.menuDropdown.active {
  display: block;
}

.searchSelectCity {
  width: 332px;
  height: 40px;
  border: 1px solid #D5D5D5;
  box-sizing: border-box;
  border-radius: 4px;
  vertical-align: center;
  padding: 0 16px;
  margin-top: 16px;
}

.searchSelectCity ul {
  list-style-type: none;
  padding: 0;
}

.searchSelectCity ul li {
  margin-top: 20px;
}

.searchSelectCity ul li a {
  color: #000;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
}

.searchSelectCity ul li a:hover {
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btnOter">
  <div class="selectCityBtn">
    <span class="textSelectCity">Выберите город</span>
    <img src="https://img.icons8.com/nolan/64/double-down.png" width="10" />
  </div>

  <div class="menuDropdown">
    <input type="text" class="searchSelectCity" placeholder="Начните вводить название города">
    <ul>
      <li><a href="">Махачкала, респ. Дагестан</a></li>
      <li><a href="">Краснодар, Краснодарский край</a></li>
      <li><a href="">Ставрополь, Ставропольский край</a></li>
      <li><a href="">Астрахань, Астраханская область</a></li>
      <li><a href="">Нальчик, Кабардино-Балкарская Республика</a></li>
    </ul>
  </div>
</div>

А если хочется именно переключать display block/none, можно добавить CSS

.menuDropdown.active {display: block;}

И переключать его при клике,

$(this)
    .closest('.btnOter').eq(0)
    .find('.menuDropdown')
    .toggleClass('active');

БЛОГ НА HUSL

jQuery: Показать / Скрыть меню

Ответы (1 шт):