Здравствуйте. Помогите создать событие, которое при нажатии на контейнер .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>