如果另一個 div 有 class，則將 class 添加到一個 div

Question

我做了很多搜索，閱讀了很多關於這個主題的問題和答案，並編寫了以下代碼，但由於某種原因它不起作用。 我正在尋求幫助解決此問題。

這就是我想要發生的事情：

當用戶將鼠標懸停在菜單項上時，會出現一個下拉菜單。

然后整個 header（當前有 ID #header）得到一個新的 class（.header-new-class）

我發現當他們在菜單項 (li) 上輸入 hover 時，網站會自動將 class“打開”添加到菜單項（菜單項已經有 class.menu-item）

所以我的邏輯是，當菜單項有 class“打開”時，它將 class“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

如果你想在 header 上添加一個 class 當鼠標在菜單項上時，這樣做，如果你還想刪除 class 然后使用下面的注釋代碼。 如果您有任何疑問，請隨時提問

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

為什么要通過 jquery 將 class 設置為 hover。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 3

您可以多次使用同一事件。 所以，這是可以用普通.hover實現的。

   $(document).ready(function(){
   $('.menu-item').hover(function(){
      $('#header').addClass('header-new-class');
   },function(){
    /* function to remove class when hovering is over */
   })
    

如果你絕對需要檢查 class open是否存在，你可以在 hover function 中進行。

您還可以使用mouseenter和mouseleave

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector");