1

Здравствуйте. Помогите создать событие, которое при нажатии на контейнер .selectCityBtn будет переворачивать стрелку на 180 градусов и при повторном нажатии возвращала ее обратно (не влияя на работу выпадающего меню)

$('.iconSelectCity').on('click', function() {
  $(this)
    .closest('.btnOter').eq(0)
    .find('.menuDropdown')
    .toggleClass('active');
});
.btnOter {
  width: 364px;
  float: left;
  overflow: hidden;
  border: none;
}

.textSelectCity {
  font-size: 14px;
}

.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;
}

.menuDropdown {
  display: none;
  padding: 0 16px;
  border: 1px solid #EEEEEE;
}

.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;
}

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

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

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

.menuDropdown 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" class="iconSelectCity" />
  </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.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

8
  • В вашем варианте, нужно кликать на саму стрелочку, а мне хотелось бы что бы при клики на всю область .selectCityBtn происходило событие :\
    – Fff Rrrr
    11 мая 2020 в 1:25
  • Так у вас так работает, и вы попросили не менять) 11 мая 2020 в 1:27
  • Я извиняюсь, за не точный вопрос. Сейчас все верно, спасибо)
    – Fff Rrrr
    11 мая 2020 в 1:30
  • если к примеру стрелку в after/before поместить то можно просто при клике подменять content с одной стрелки на другую 11 мая 2020 в 1:30
  • На самом деле.. не додумался)
    – Fff Rrrr
    11 мая 2020 в 1:33

1 ответ 1

2

$('.selectCityBtn').on('click', function() {
  $(this)
    .closest('.btnOter')
    .find('.menuDropdown')
    .toggleClass('active');
    
  $(this).find('.iconSelectCity').toggleClass('active');
});
.btnOter {
  width: 364px;
  float: left;
  overflow: hidden;
  border: none;
}

.textSelectCity {
  font-size: 14px;
}

.selectCityBtn {
  user-select: none;
  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;
}

.menuDropdown {
  display: none;
  padding: 0 16px;
  border: 1px solid #EEEEEE;
}

.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;
}

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

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

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

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

.iconSelectCity.active {
  transform: rotate(180deg);
}
<div class="btnOter">
  <div class="selectCityBtn">
    <span class="textSelectCity">Выберите город</span>
    <img src="https://img.icons8.com/nolan/64/double-down.png" width="10" class="iconSelectCity" />
  </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.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

1

Ваш ответ

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

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