jquery - I cannot remove the class "arrow-open" when clicked on the opened arrow again

Question

I need to add the class "arrow-open" on after the click on "has-child". and remove when clicked on other siblings of "has-child". It works till that but doesn't remove it, when I click again on the active "has-child".

$('.has-child').click(function() {
    $(this).toggleClass('open-child');
    $(this).siblings().removeClass('open-child');
    // remove classes from all
    $('.fa-angle-right').removeClass('arrow-open');
    // add class to the one we clicked
    $('.fa-angle-right', this).addBack(this).toggleClass('arrow-open');
});

This is the html

<div id="mobile-menu">
<ul class="mobile-nav">
    <li><a href="index.php">Home</a></li>
    <li class="has-child"><a href="#">Platform <i class="fas fa-angle-right"></i></a>
        <ul class="child-nav">
            <li><a href="hr.php">HR</a></li>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </li>
    <li class="has-child"><a href="#">Platform <i class="fas fa-angle-right"></i></a>
        <ul class="child-nav">
            <li><a href="hr.php">HR</a></li>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </li>
    <li class="has-child"><a href="#">Platform <i class="fas fa-angle-right"></i></a>
        <ul class="child-nav">
            <li><a href="hr.php">HR</a></li>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </li>
</ul>

标签： jqueryhtml

Answer 1

更改您的脚本功能的顺序，例如

$('.has-child').click(function() {
$(this).siblings().removeClass('open-child');
$(this).siblings().removeClass('arrow-open');
    $(this).toggleClass('open-child');

    // remove classes from all

    // add class to the one we clicked
    $('.fa-angle-right', this).addBack(this).toggleClass('arrow-open');
});

https://jsfiddle.net/lalji1051/kenjspot/3/