jquery - onclick 从特定的 div 中删除类不工作 jquery 函数

Question

$(".side-nav-toggle").click(function() {
    $("body").toggleClass("side-nav-open");
});

$(".nav-level-back").click(function() {
    $(".nav-links-container").removeClass("open");
    $(".nav-level-2").removeClass("open");
});
$(".nav-links li").click(function() {
    $(".nav-links-ontainer").addClass("open");
    $(this).children('div').addClass('open');
});

我为导航目的编写了这个 jquery，addclass 工作正常，但是当我想从 div 中删除 addedclasses 时，removeClass 函数不起作用。当我触发删除类功能时，它突出显示那些目标 div 但没有从中删除类，

请查看此链接 http://picpaste.com/helpp-Nkc9zDIU.png

html

<nav class="main-nav js-target-container">
    <div class="inner max-girdle-width">
        <div class="nav-links-container">
            <ul class="nav-links">
                <li class="nav-whats-new">
                    <a class="nav-level-1" href="/tr/en/Shop/Whats-New/Now?cm_sp=topnav-_-whatsnew-_-topbar">What&#x27;s New</a>
                    <div class="nav-level-2 visibility-fix template-whats-new">
                        <div class="nav-level-2-container row max-girdle-width">
                            <div class="nav-level-back">Back</div>

                            <span class="line-break"></span>
                            <div class="list-container shop col-lg-2 col-xs-12">
                                <h3 class="heading">Shop by</h3>
                                <ul>
                                    <li><a href="/tr/en/Shop/Whats-New/Now?cm_sp=topnav-_-whatsnew-_-thisweek">This Week</a></li>
                                    <li><a href="/tr/en/Shop/Whats-New/Previously?cm_sp=topnav-_-whatsnew-_-lastweek">Last Week</a></li>
                                    <li><a href="/tr/en/Shop/List/Whats_New_Last_Month?cm_sp=topnav-_-whatsnew-_-lastmonth">Last Month</a></li>
                                    <li><a href="/tr/en/Shop/List/New_Designers?npp=view_all&amp;cm_sp=topnav-_-whatsnew-_-newdesigners">New Designers</a></li>
                                    <li><a href="/tr/en/Shop/List/Back_In_Stock?cm_sp=topnav-_-whatsnew-_-backinstock">Back In Stock</a></li>
                                    <li><a href="/tr/en/Shop/List/All_Exclusives?cm_sp=topnav-_-whatsnew-_-exclusives">Exclusives</a></li>
                                    <li><a href="/tr/en/Shop/List/New_Season_Arrivals?npp=view_all&amp;cm_sp=topnav-_-whatsnew-_-newseasonnow">New Season Now</a></li>
                                </ul>
                            </div>

                            <div class="col-lg-2 whats-new-product">
                                <h3 class="heading">Editor&#x27;s Picks</h3>
                                <a href="#">
                                    <img src="">
                                    <div class="product-designer"></div>
                                    <div class="product-title"></div>
                                    <div class="product-price"></div>
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

您好，我已经找到原因了。它与 HTML 元素的层次结构有关，您在点击 li 时添加开放类，并在点击后退链接时删除类。但是反向链接在li之内。因此，当您单击后退链接时，jQuery 首先删除 open 类，然后由于 li 也被单击，它再次添​​加。使用警报检查它

$(".side-nav-toggle").click(function() {
    $("body").toggleClass("side-nav-open");
});

$(".nav-level-back").click(function() {alert("Back link clicked remove class");
    $(".nav-links-container").removeClass("open");
    $(".nav-level-2").removeClass("open");
});
$(".nav-links li").click(function() {alert("Add class open");
    $(".nav-links-ontainer").addClass("open");
    $(this).children('div').addClass('open');
});