onclick 从特定 div 中删除类不起作用 jquery 函数答案

【问题标题】：onclick remove class from specific div not working jquery functiononclick 从特定 div 中删除类不起作用 jquery 函数
【发布时间】：2015-12-20 14:37:06
【问题描述】：

$(".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>

【问题讨论】：

最好也添加html
我刚刚添加了代码，请检查一下。
在小提琴中重现问题以便我们修复

标签： jquery css html responsive-design navbar

【解决方案1】：

这是一个切换类的演示。它可能会有所帮助

$(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>

【讨论】：

【解决方案2】：

嗨，我已经弄清楚了，即原因。它与 HTML 元素的层次结构有关，您在单击 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');
});

【讨论】：

对此有何其他建议？
表示有什么替代方法吗？实际上我正在尝试制作net-a-porter.com这种类型的导航栏
是的，很简单，把你的反向链接放在li外面，让它的位置绝对。不要忘记使父元素的位置相对。

【解决方案3】：

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

试试这个我希望它会工作......

【讨论】：

不工作 :( 。当我点击“nav-level-back”时，它会从这 2 个 div “nav-links-container”，“nav-level-2”中删除开放类. 看这个屏幕截图picpaste.com/helpp-Nkc9zDIU.png