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中删除addclasses时，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

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

试试这个我希望它能起作用......

Answer 2

嗨，我已经弄清楚了，即原因。它与HTML元素的层次结构有关，您在点击li时添加了开放类，并在点击后退链接时删除了类。但是后面的链接在li里面。因此，当您单击后退链接时，jQuery首先删除打开的类，然后由于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

以下是切换类的演示。它可能会有所帮助

$(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中删除类不工作的jquery函数

3 个答案: