jquery - JQuery 在悬停时显示 DIV 和新的 Div 停留

Question

我目前有一个带有 class="toggle-drop2" 的 DIV，其中包含文本“查看更多”

在这个 DIV 下是另一个 id="category-drop" 的 DIV

使用当前的 JQuery：

jQuery('document').ready(function(){
jQuery(".toggle-drop2").hover(function () {
$this = jQuery(this);
$this.hasClass('open') ? ($this.removeClass('open')) : $this.addClass('open');
jQuery('#category-drop').slideToggle();
});
});

当您将鼠标悬停在“toggle-drop2”DIV 上时，将出现“category-drop”DIV。现在有谁知道如果我将鼠标悬停在“类别下降”DIV 上，我该如何让它保持不变？

现在，如果我将鼠标悬停在“类别下降”DIV 上，DIV 就会消失。

HTML是这样的：

<div id="toggle-drop-link-container" align="center">
<a href="#" class="toggle-drop2">ALL ITEMS</a>
</div>

<div id="category-drop">
Something here
</div>

Answer 1

嵌套元素：

<div class="toggle-drop2">
    <div id="category-drop">
        <!-- dropdown content -->
    </div>
</div>

js

jQuery(document).ready(function($){
    $(".toggle-drop2").hover(function () {
      $(this).toggleClass('open');
      $('#category-drop').slideToggle();
    });
});