如果另一个 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{

  background-color : lightBlue;

}

.menu-item:hover{

  color: blue;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div ID="header">

    <div>

    <div>

    <div>

    <div>

    <div>

        <nav>

        <nav>

            <div>

            <div>

                <ul>

                    <li class="menu-item">

              Sample Link 1

                    </li>

          <li class="menu-item">

              Sample Link 2

                    </li>

          <li class="menu-item">

              Sample Link 3

                    </li>

                </ul>

            </div>

            </div>

        </nav>

        </nav>

    </div>

    </div>

    </div>

    </div>

    </div>

</div>

Answer 2

如果您想在鼠标位于菜单项上时在标题上添加一个类，请这样做，如果您还想删除该类，请使用下面的注释代码。如果您有任何疑问，请随时提问

$(document).ready(function(){

  $('.menu-item').on('mouseover',function(){

    /*$('.menu-item').removeClass('open');

    $(this).addClass("open");*/

    if($(this).hasClass('open')){

      $('#header').addClass('yourNewClass');

    }else{

      $('#header').removeClass('yourNewClass');

    }

  });

  

  /*$('.menu-item').on('mouseleave',function(){

    $('.menu-item').removeClass('open');

    $('#header').removeClass('yourNewClass');

  });*/

});

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

    <div>

    <div>

    <div>

    <div>

    <div>

        <nav>

        <nav>

            <div>

            <div>

                <ul>

                    <li class="menu-item open">

                      item 1

                    </li>

                    <li class="menu-item">

                        item 2

                    </li>

                    <li class="menu-item">

                        item 3

                    </li>

                </ul>

            </div>

            </div>

        </nav>

        </nav>

    </div>

    </div>

    </div>

    </div>

    </div>

</div>

Answer 3

您可以多次使用同一事件。所以，这是可以实现的正常.hover。

   $(document).ready(function(){

   $('.menu-item').hover(function(){

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

   },function(){

    /* function to remove class when hovering is over */

   })

    

如果你绝对需要检查类是否open存在，你可以在悬停函数中进行。

您还可以使用mouseenter和mouseleave

$(document).on({

    mouseenter: function () {

        //stuff to do on mouse enter

    },

    mouseleave: function () {

        //stuff to do on mouse leave

    }

}, ".selector");