jquery - 同じリストアイテムからアクティブクラスを追加および削除する必要があります

Question

このコードはクリックするとアクティブクラスを追加します。別のリストをクリックすると正常に機能しますが、同じリンクをもう一度クリックしてもアクティブクラスは削除されません。私を助けてください。

前もって感謝します。

$(document).ready(function(){
    $("li.menulink a").click(function(e){
    e.preventDefault();
    var thisList = $(this).next();
    thisList .toggle();
    $('li.menulink div').not(thisList).hide();
    $('a').removeClass('active');
    $(this).addClass('active');

    //$(this).removeClass("active");
});

}); 

<ul class="allcategorymenu">
            <li class="menuheading menulink"><h1>All Categories</h1></li>
            <li class="mobile menulink"><a href="#"><span>Mobile &amp; Accessories</span></a>
            <div class="submenu" style="display:none;">
                <ul>
                    <li><a href="1.html">All Jewelry</a></li>
                    <li><a href="2.html">Diamond Jewelry</a></li>
                    <li><a href="3.html">Silver Jewelry</a></li>
                    <li><a href="#">Pearl Jewelry</a></li>
                    <li><a href="#">Fashion Jewelry</a></li>
                    <li><a href="#">Gemstone Jewelry</a></li>
                    <li><a href="#">Spiritual Jewelry</a></li>
                </ul>
            </div>
            </li>
            <li class="mens menulink"><a href="#"><span>Men's Apparel</span></a>
            <div class="submenu" style="display:none;">
                <ul>
                    <li><a href="1.html">All Jewelry</a></li>
                    <li><a href="2.html">Diamond Jewelry</a></li>
                    <li><a href="3.html">Silver Jewelry</a></li>
                    <li><a href="#">Pearl Jewelry</a></li>
                    <li><a href="#">Fashion Jewelry</a></li>
                    <li><a href="#">Gemstone Jewelry</a></li>
                    <li><a href="#">Spiritual Jewelry</a></li>
                </ul>
            </div>
    </li>
    </ul>

Answer 1

$("li.menulink a").click(function(e) {
    e.preventDefault();
    var thisList = $(this).next();
    thisList.toggle();
    $('li.menulink div').not(thisList).hide();
    $(this).toggleClass('active ');
    $('a.active').not(this).removeClass('active ');
});

デモ

Answer 2

$(document).ready(function(){
    $("li.menulink a").click(function(e){
        e.preventDefault();
        var $this = $(this),
            thisList = $this.next();
        thisList.toggle();
        $('li.menulink div').not(thisList).hide();
        $('a').not($this).removeClass('active');
        $this.toggleClass('active');
    });
});

このコードは<a>、クリックされたタグ以外のすべてのタグからアクティブなクラスを削除し、そのタグでアクティブなクラスを切り替えます。既存のコードは、すべてのアンカー タグからクラスを削除し、クリックされたかどうかに関係なく、アクティブなタグに追加しました。