onclick 从特定 div 中删除 class 无效 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 工作正常但是当我想从 divs removeClass 函数中删除添加的classes 时不起作用。当我触发删除 class 功能时，它会突出显示目标 div 但没有从中删除 class，

请看这个linkhttp://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

$(".nav-links-container").live("click", function(){
   $(this).removeClass('open');
});

试试这个，希望它能奏效...

Answer 2

嗨，我已经弄明白了，即原因。它与 HTML 元素的层次结构有关，您在单击 li 时添加打开 class，并在单击返回 link 时删除 class。但是后面的link在li之内。所以当你点击 back link 时，jQuery 首先删除 open class 然后因为 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');
});

Answer 3

这里是切换 class 的演示。可能会有帮助

$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
  });
});

.blue {
  color: blue;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
  <body>
    <p>This is paragraph.</p>
    <button>Toggle class</button>
  </body>
</html>

onclick 从特定 div 中删除 class 无效 jquery 函数

onclick remove class from specific div not working jquery function

html

css

jquery

navbar

responsive-design