Question

此代码在点击时添加Active类，如果我点击另一个列表，它工作正常，但如果我再次点击同一链接，则不会从中删除活动类。请帮帮我。

先谢谢。

$(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 ');
});

<强> Demo

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>标记中删除活动类，然后在该标记上切换活动类。您的现有代码会从所有锚标记中剥离该类，然后将其添加到活动标记中，无论是否单击它。

需要在同一列表项中添加和删除活动类

2 个答案: