Как создать значок, который вращается вниз, когда нажимается только

Question

Я сделал меню слайдов со значком и, когда пользователь нажимает на значок, он будет вращаться вниз, но когда я нажимаю один из значков, все значки вращаться. Как повернуть только щелкнув значок, не все?

$(document).ready(function() { 
 
    // toggle slide down nav 
 
    $('.nav-sidebar ul:has(li)').addClass('sub-menu'); 
 

 
    $('.dropmenu').on('click', function() { 
 
    $(this).next('.sub-menu').slideToggle(200); 
 
    $(this).parent().siblings().children().next().slideUp(); 
 
    return false; 
 
    }); 
 
    // arrow rotate 
 
    $('.dropmenu').on('click', function() { 
 
    // $('.dropmenu').removeClass('openmenu'); 
 
    // $(this).addClass('openmenu'); 
 
    if ($('.dropmenu').hasClass('openmenu')) { 
 
     $('.dropmenu').removeClass('openmenu'); 
 
    } else { 
 
     $('.dropmenu').addClass('openmenu'); 
 
    } 
 
    }); 
 
});

.nav-sidebar { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav-sidebar>li>a, 
 
.sub-menu>li>a { 
 
    display: block; 
 
    color: #838F9A; 
 
    text-transform: capitalize; 
 
    padding: 0 30px; 
 
    line-height: 3.5em; 
 
} 
 
.sub-menu>li>a { 
 
    line-height: 2.5em; 
 
} 
 
.nav-sidebar>li>a:hover, 
 
.nav-sidebar>li>a:focus, 
 
.sub-menu>li>a:hover, 
 
.sub-menu>li>a:focus { 
 
    color: #4FC1E9; 
 
} 
 
.dropmenu:after { 
 
    font-family: 'FontAwesome'; 
 
    font-size: 16px; 
 
    content: "\f105"; 
 
    vertical-align: middle; 
 
    float: right; 
 
    margin-right: -10px; 
 
    transition: all .3s ease; 
 
} 
 
.openmenu:after { 
 
    -ms-transform: rotate(90deg); 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 
.sub-menu { 
 
    display: none; 
 
    list-style: none; 
 
    padding: 10px 30px; 
 
    margin: 0; 
 
    background-color: #1D232B; 
 
    position: relative; 
 
} 
 
.open-menu>.sub-menu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<ul class="nav-sidebar"> 
 
    <li> 
 
    <a href="javascript:void(0);" class="dropmenu">Place</a> 
 
    <ul> 
 
     <li><a href="place.php">Published</a> 
 
     </li> 
 
     <li><a href="schedule.php">Schedule</a> 
 
     </li> 
 
     <li><a href="my-place.php">My Place</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="javascript:void(0);" class="dropmenu">Place</a> 
 
    <ul> 
 
     <li><a href="place.php">Published</a> 
 
     </li> 
 
     <li><a href="schedule.php">Schedule</a> 
 
     </li> 
 
     <li><a href="my-place.php">My Place</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Внешний пример, который я сделал: https://jsfiddle.net/y6adghh3/

Answer 1

$(document).ready(function() { 
 
    // toggle slide down nav 
 
    $('.nav-sidebar ul:has(li)').addClass('sub-menu'); 
 

 
    $('.dropmenu').on('click', function() { 
 
    $(this).toggleClass('openmenu');// arrow rotate 
 
    $(this).next('.sub-menu').slideToggle(200); 
 
    $(this).parent().siblings().children().removeClass('openmenu').next().slideUp(); 
 
    return false; 
 
    }); 
 
    
 
});

.nav-sidebar { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav-sidebar>li>a, 
 
.sub-menu>li>a { 
 
    display: block; 
 
    color: #838F9A; 
 
    text-transform: capitalize; 
 
    padding: 0 30px; 
 
    line-height: 3.5em; 
 
} 
 
.sub-menu>li>a { 
 
    line-height: 2.5em; 
 
} 
 
.nav-sidebar>li>a:hover, 
 
.nav-sidebar>li>a:focus, 
 
.sub-menu>li>a:hover, 
 
.sub-menu>li>a:focus { 
 
    color: #4FC1E9; 
 
} 
 
.dropmenu:after { 
 
    font-family: 'FontAwesome'; 
 
    font-size: 16px; 
 
    content: "\f105"; 
 
    vertical-align: middle; 
 
    float: right; 
 
    margin-right: -10px; 
 
    transition: all .3s ease; 
 
} 
 
.openmenu:after { 
 
    -ms-transform: rotate(90deg); 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 
.sub-menu { 
 
    display: none; 
 
    list-style: none; 
 
    padding: 10px 30px; 
 
    margin: 0; 
 
    background-color: #1D232B; 
 
    position: relative; 
 
} 
 
.open-menu>.sub-menu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<ul class="nav-sidebar"> 
 
    <li> 
 
    <a href="javascript:void(0);" class="dropmenu">Place</a> 
 
    <ul> 
 
     <li><a href="place.php">Published</a> 
 
     </li> 
 
     <li><a href="schedule.php">Schedule</a> 
 
     </li> 
 
     <li><a href="my-place.php">My Place</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="javascript:void(0);" class="dropmenu">Place</a> 
 
    <ul> 
 
     <li><a href="place.php">Published</a> 
 
     </li> 
 
     <li><a href="schedule.php">Schedule</a> 
 
     </li> 
 
     <li><a href="my-place.php">My Place</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

Ваш селектор $('.dropmenu') в функции .on('click' выбирает любой элемент на странице с классом dropmenu. Вы должны убедиться, что он выбирает только тот элемент, который нажат. К счастью, вы можете ссылаться на элемент с щелчком через this.

Следующий код должен работать:

$(document).ready(function() { 
    // toggle slide down nav 
    $('.nav-sidebar ul:has(li)').addClass('sub-menu'); 

    $('.dropmenu').on('click', function() { 
    $(this).next('.sub-menu').slideToggle(200); 
    $(this).parent().siblings().children().next().slideUp(); 
    return false; 
    }); 
    // arrow rotate 
    $('.dropmenu').on('click', function() { 
    if ($(this).hasClass('openmenu')) { 
     $(this).removeClass('openmenu'); 
    } else { 
     $(this).addClass('openmenu'); 
    } 
    }); 
}); 

Answer 3

Просто измените обработчик щелчка, чтобы ссылаться на щелкнул элемент, используя «это».

$('.dropmenu').on('click', function() { 
    if ($(this).hasClass('openmenu')) { 
     $(this).removeClass('openmenu'); 
    } else { 
     $(this).addClass('openmenu'); 
    } 
    }); 
});