如果另一个 div 有一个类，则将类添加到一个 div

Question

我做了很多搜索，阅读了很多关于这个主题的问题和答案，并编写了以下代码，但由于某种原因它不起作用。我正在寻求帮助解决此问题。

这就是我想要发生的事情：

当用户将鼠标悬停在菜单项上时，会出现一个下拉菜单。

然后整个标头（当前具有ID #header）获得一个新类（.header-new-class）

我发现当他们将鼠标悬停在菜单项 (li) 上时，该站点会自动将类“打开”添加到菜单项（菜单项已经具有类 .menu-item）

所以我的逻辑是，当菜单项具有类“open”时，它会将类“header-new-class”添加到 ID 为#header 的 div

这是一个非常干净的 HTML 版本：

<div ID="header">

    <div>

    <div>

    <div>

    <div>

    <div>

        <nav>

        <nav>

            <div>

            <div>

                <ul>

                    <li class="menu-item open">

                    </li>

                </ul>

            </div>

            </div>

        </nav>

        </nav>

    </div>

    </div>

    </div>

    </div>

    </div>

</div>

这是我写的代码：

$(document).ready(function(jQuery) {

    if ($('.menu-item').hasClass('open')) {

        $('#header').addClass('header-new-class');

    }

});

它不工作。我究竟做错了什么？

Answer 1

为什么要通过 jquery 为悬停设置类。CSS 具有:hover提供您想要的相同效果的功能。#header:hover{&nbsp; background-color : lightBlue;}.menu-item:hover{&nbsp; color: blue;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div ID="header">&nbsp; &nbsp; <div>&nbsp; &nbsp; <div>&nbsp; &nbsp; <div>&nbsp; &nbsp; <div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <nav>&nbsp; &nbsp; &nbsp; &nbsp; <nav>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="menu-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sample Link 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="menu-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sample Link 2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="menu-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sample Link 3&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>

Answer 2

如果您想在鼠标位于菜单项上时在标题上添加一个类，请这样做，如果您还想删除该类，请使用下面的注释代码。如果您有任何疑问，请随时提问$(document).ready(function(){&nbsp; $('.menu-item').on('mouseover',function(){&nbsp; &nbsp; /*$('.menu-item').removeClass('open');&nbsp; &nbsp; $(this).addClass("open");*/&nbsp; &nbsp; if($(this).hasClass('open')){&nbsp; &nbsp; &nbsp; $('#header').addClass('yourNewClass');&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; $('#header').removeClass('yourNewClass');&nbsp; &nbsp; }&nbsp; });&nbsp;&nbsp;&nbsp; /*$('.menu-item').on('mouseleave',function(){&nbsp; &nbsp; $('.menu-item').removeClass('open');&nbsp; &nbsp; $('#header').removeClass('yourNewClass');&nbsp; });*/});.yourNewClass .menu-item.open {color: red;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div ID="header">&nbsp; &nbsp; <div>&nbsp; &nbsp; <div>&nbsp; &nbsp; <div>&nbsp; &nbsp; <div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <nav>&nbsp; &nbsp; &nbsp; &nbsp; <nav>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="menu-item open">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="menu-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item 2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="menu-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item 3&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>

Answer 3

您可以多次使用同一事件。所以，这是可以实现的正常.hover。&nbsp; &nbsp;$(document).ready(function(){&nbsp; &nbsp;$('.menu-item').hover(function(){&nbsp; &nbsp; &nbsp; $('#header').addClass('header-new-class');&nbsp; &nbsp;},function(){&nbsp; &nbsp; /* function to remove class when hovering is over */&nbsp; &nbsp;})&nbsp; &nbsp;&nbsp;如果你绝对需要检查类是否open存在，你可以在悬停函数中进行。您还可以使用mouseenter和mouseleave$(document).on({&nbsp; &nbsp; mouseenter: function () {&nbsp; &nbsp; &nbsp; &nbsp; //stuff to do on mouse enter&nbsp; &nbsp; },&nbsp; &nbsp; mouseleave: function () {&nbsp; &nbsp; &nbsp; &nbsp; //stuff to do on mouse leave&nbsp; &nbsp; }}, ".selector");