Вращать стрелку у пункта выпадающего списка только с 2 клика
Есть задача доработать фильтры сортировки. Сейчас реализовано следующее:
- Значение по умолчанию - первое, у него, помимо класса ".sort-option', есть ещё и класс ".selected". Также стрелка у этого пункта смотрит вверх
- При клике на другой элемент ему добавляется класс ".selected", его стрелка начинает смотреть вверх
Что я пытаюсь доработать: необходимо, чтобы при повторном клике на уже выбранный пункт фильтра, его стрелка должна опускаться вниз, так как есть функция, меняющая порядок сортировки. Если кликать на пункт, то с каждым кликом стрелка должна вращаться, но этого не происходит. В чем моя ошибка?
$('body').click(function(e) {
if ($('.sort-options').is(':visible')) {
var $target = $(e.target);
$('.dropdown-selector').toggleClass('vis')
if (!$target.hasClass('sort-options') && !$target.hasClass('sort-option') && !$target.hasClass('currently-selected')) {
$('.sort-options').slideUp(200, 'swing');
}
}
if ($('.sort-option').is('.selected')) {
$('.sort-option > .sort-option-arr').removeClass('clicked');
$('.sort-option.selected > .sort-option-arr').addClass('clicked');
}
});
$('.dropdown-selector').click(function() {
$('.sort-options').slideToggle(200, 'swing');
});
$('.sort-options > li').click(function() {
var clickedText = $(this).text(),
clickedVal = $(this).attr('data-value'),
currentOptionCont = $('.dropdown-selector').find('.currently-selected'),
currentOptionText = currentOptionCont.text(),
currWidth = $(window).width();
if (clickedText != currentOptionText) {
$('.sort-options').find('.selected').removeClass('selected');
$(this).addClass('selected');
currentOptionCont.text(clickedText).attr('data-value', clickedVal);
}
});
var clicked = true;
$('.sort-option.selected').click(function() {
if (clicked) {
$('.sort-option-arr').removeClass('clicked');
$('.sort-option-arr').addClass('clicked');
}
clicked = !clicked;
});
.dropdown-sort {
right: 50%;
top: 50%;
height: 44px;
position: absolute;
z-index: 10;
}
.sort-options {
display: none;
position: relative;
list-style: none;
margin: 0px;
background: #fff;
border: 1px solid #dddddd;
border-top: none;
border-radius: 0 0 5px 5px;
}
.sort-options li {
transition: 0.2s ease-in-out;
}
.sort-option {
padding: 1em;
cursor: pointer;
background-color: #ffffff;
}
.sort-option span {
display: inline-block;
color: #4e4e4e;
}
.sort-option img {
width: 8px;
height: 8px;
}
.sort-option-arr.clicked {
transform: rotate(180deg);
}
.angle-selectors {
height: 30px;
width: 100%;
float: right;
display: block;
}
.angle-selectors .drop {
width: 100%;
}
.dropdown-selector {
width: 255px;
color: #4e4e4e;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 5px;
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #4e4e4e;
z-index: 10;
}
.currently-selected {
height: 44px;
display: flex;
align-items: center;
padding-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-sort">
<div class="dropdown-selector">
<div id="sort-by">
<div class="currently-selected" data-value="По дате начала продажи">По дате начала продажи</div>
<ul id="sortOptions" class="sort-options">
<li class="sort-option selected" data-value="По дате начала продажи">По дате начала продажи <svg class="sort-option-arr" width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.271242 0.295165C-0.0921565 0.662571 -0.0914839 1.25422 0.272749 1.6208L5.29075 6.67114C5.68179 7.06469 6.31846 7.06469 6.7095 6.67114L11.7243 1.62401C12.0903 1.25566 12.091 0.661134 11.7258 0.291944C11.3556 -0.0824116 10.7509 -0.0824112 10.3806 0.291945L6.35561 4.36133C6.15992 4.55918 5.84034 4.55918 5.64464 4.36133L1.62283 0.295165C1.2508 -0.0809641 0.643268 -0.0809636 0.271242 0.295165Z" fill="#DDDDDD"/>
</svg>
</li>
<li class="sort-option" data-value="По цене объекта">По цене объекта <svg class="sort-option-arr" width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.271242 0.295165C-0.0921565 0.662571 -0.0914839 1.25422 0.272749 1.6208L5.29075 6.67114C5.68179 7.06469 6.31846 7.06469 6.7095 6.67114L11.7243 1.62401C12.0903 1.25566 12.091 0.661134 11.7258 0.291944C11.3556 -0.0824116 10.7509 -0.0824112 10.3806 0.291945L6.35561 4.36133C6.15992 4.55918 5.84034 4.55918 5.64464 4.36133L1.62283 0.295165C1.2508 -0.0809641 0.643268 -0.0809636 0.271242 0.295165Z" fill="#DDDDDD"/></li>
<li class="sort-option" data-value="По цене за метр">По цене за метр <svg class="sort-option-arr" width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.271242 0.295165C-0.0921565 0.662571 -0.0914839 1.25422 0.272749 1.6208L5.29075 6.67114C5.68179 7.06469 6.31846 7.06469 6.7095 6.67114L11.7243 1.62401C12.0903 1.25566 12.091 0.661134 11.7258 0.291944C11.3556 -0.0824116 10.7509 -0.0824112 10.3806 0.291945L6.35561 4.36133C6.15992 4.55918 5.84034 4.55918 5.64464 4.36133L1.62283 0.295165C1.2508 -0.0809641 0.643268 -0.0809636 0.271242 0.295165Z" fill="#DDDDDD"/></li>
</ul>
</div>
</div>
</div>
Источник: Stack Overflow на русском