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

Posted 2023-05-09

【中文标题】在悬停父项上打开子 div 并关闭其他子 div（使用 Javascript）

【英文标题】：Open child div on hover parent and close other child divs ( w/ Javascript)

【发布时间】：2021-12-26 18:54:39

【问题描述】：

当我使用 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>

【参考方案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>

【参考方案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>

【讨论】：

非常感谢您进行如此详细的介绍，传统的解决方案是一个很好的解决方案，也是我自己答案的绝佳替代品，我唯一更喜欢我的答案的是其他孩子仅当您将鼠标悬停在另一位父母时才会关闭，但在旁边，干得好，非常感谢您的时间！