在悬停父项上打开子 div 并关闭其他子 div（使用 Javascript）

Question

当我使用 Javascript 在悬停时打开一个子 div 时，它也可以工作，当我将鼠标悬停在子 div 打开的下一个父 div 上时，但是当我回到第一个父级时，第二个保持打开（在顶部）并且没有t 淡出。

我想要的是另一个子 div('s) 在悬停到新的时关闭。也许很高兴知道，我只希望其他子 div 在悬停到带有子 div 的新父级时关闭，而不是当我只是悬停在当前父级之外时。

有人知道诀窍吗？

$('li.menu-item-has-children').hover(function () {
  $('ul.dropdown-menu-main', this).fadeIn('slow');
});

ul, ul li {
  list-style:none;
  padding:0;
  margin:0;
}

li {
  display: inline-block;
  position: relative;
  margin-right:20px !important;
}

ul.dropdown-menu-main {
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100vh;
  background:black;
  z-index:-1;
  padding:50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="menu-item-has-children">
  
    <a href="#">Main 1</div>
    <ul class="dropdown-menu-main">
      <li>Sub 1</li>
    </ul>
  </li>
  
  <li class="menu-item-has-children">
    
    <a href="#">Main 2</div>
    <ul class="dropdown-menu-main">
      <li>Sub 2</li>
    </ul>
    
  </li>
</ul>

Answer 1

当 'parent()' 和 'children()' 不是 'this' 时，我找到了解决方案。

$('li.menu-item-has-children').hover(function () {
  $('ul.dropdown-menu-main', this).fadeIn('slow');
  $(this).parent().children().not(this).find('ul.dropdown-menu-main').fadeOut('fast');
});

ul, ul li {
  list-style:none;
  padding:0;
  margin:0;
}

li {
  display: inline-block;
  position: relative;
  margin-right:20px !important;
}

ul.dropdown-menu-main {
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100vh;
  background:black;
  z-index:-1;
  padding:50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="menu-item-has-children">
  
    <a href="#">Main 1</div>
    <ul class="dropdown-menu-main">
      <li>Sub 1</li>
    </ul>
  </li>
  
  <li class="menu-item-has-children">
    
    <a href="#">Main 2</div>
    <ul class="dropdown-menu-main">
      <li>Sub 2</li>
    </ul>
    
  </li>
</ul>

Answer 2

抱歉，刚刚重新阅读了您的问题并意识到您希望菜单保持活跃状态​​。我创建了一个演示，它通过添加.active 类并使用fadeIn 和fadeOut 切换您最初想要的子菜单来做到这一点。如果您宁愿使用 jquery 而不是 jquery，这也将允许您将 css 样式归因于下拉列表。

// Toggle function on hover, ignore if already active
$(".menu-item-has-children:not('.active')").hover( function() {

  // Remove active class from all menus
  $(".menu-item-has-children.active").toggleClass();
  
  // Add toggle class to this menu
  $(this).toggleClass("active");
  
  // Fade out existing dropdown menus
  $(".dropdown-menu-main").fadeOut('slow');
  
  // Fade in this child dropdown menu
  $(this).find(".dropdown-menu-main").fadeIn('slow');

});

我将留给其他人的第二个例子，它展示了如何做一个更传统的下拉菜单，一旦悬停离开父级，它就会淡出。您可以使用退出功能以及悬停的进入功能，您提供的第一个功能在mouseenter上运行，第二个在mouseleave上运行。

Jquery .hover()

---

---

持久性下拉示例

// Toggle function on hover, ignore if already active
$(".menu-item-has-children:not('.active')").hover( function() {

  // Remove active class from all menus
  $(".menu-item-has-children.active").toggleClass();
  
  // Add toggle class to this menu
  $(this).toggleClass("active");
  
  // Fade out existing dropdown menus
  $(".dropdown-menu-main").fadeOut('slow');
  
  // Fade in this child dropdown menu
  $(this).find(".dropdown-menu-main").fadeIn('slow');

});

ul, ul li {
  list-style:none;
  padding:0;
  margin:0;
}

li {
  display: inline-block;
  position: relative;
  margin-right:20px !important;
}

ul.dropdown-menu-main {
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100vh;
  background:black;
  z-index:-1;
  padding:50px;
}

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


<ul>
  <li class="menu-item-has-children">

    <a href="#">Main 1</div>
    <ul class="dropdown-menu-main">
      <li>Sub 1</li>
    </ul>
  </li>
  
  <li class="menu-item-has-children">
    
    <a href="#">Main 2</div>
    <ul class="dropdown-menu-main">
      <li>Sub 2</li>
    </ul>
    
  </li>
</ul>

---

传统下拉菜单示例 当悬停在父级上结束时，它们会折叠。

// Hover function
$('li.menu-item-has-children').hover(

  // Hover in function
  function() {
    $('ul.dropdown-menu-main', this).fadeIn('slow');
  },

  // Hover exit function
  function() {
    $('ul.dropdown-menu-main', this).fadeOut('slow');
  }

);

ul,
ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  position: relative;
  margin-right: 20px !important;
}

ul.dropdown-menu-main {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background: black;
  z-index: -1;
  padding: 50px;
}

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


<ul>
  <li class="menu-item-has-children">

    <a href="#">Main 1</div>
    <ul class="dropdown-menu-main">
      <li>Sub 1</li>
    </ul>
  </li>
  
  <li class="menu-item-has-children">
    
    <a href="#">Main 2</div>
    <ul class="dropdown-menu-main">
      <li>Sub 2</li>
    </ul>
    
  </li>
</ul>