从 div 悬停到 div 时，jQuery Dropdown 不断关闭答案

【问题标题】：jQuery Dropdown keeps closing when hovering from div to div从 div 悬停到 div 时，jQuery Dropdown 不断关闭
【发布时间】：2020-03-25 17:00:42
【问题描述】：

我从两个不同的 div 中创建了一个下拉列表。一个是触发器，一个是子菜单。如果鼠标从触发器悬停到子菜单，则子菜单关闭。即使鼠标在两个 div 之间切换，如何保持打开状态？

我也不能在下拉触发器中移动子菜单容器。它们需要是两个独立的 div。

$('.dropdown-trigger,.submenu-container').hover(
  function(){$('.submenu-container').css('display', 'block')},
  function(){$('.submenu-container').css('display', 'none')},
);

非常感谢您！

【问题讨论】：

您是否尝试过删除行“function(){$('.submenu-container').css('display', 'none')}”？
是的，它保持打开状态。但是当鼠标离开触发器和子菜单时我需要隐藏它
你可能想使用这个丑陋的解决方案然后stackoverflow.com/questions/8557492/… 但请记住，使用这样的计时器通常被认为是一种不好的做法
感谢您的链接！我已经让它在演示中工作了！ :-D 现在我需要把它翻译成我的编程 xD @Kajbo
试试这个link

标签： javascript jquery dropdown

【解决方案1】：

你可能不需要 jquery。你可以用css来做。类似的方式你可以在 jquery 中做

.dropdown {
  max-width: 200px;
  list-style: none;
  padding: 10px;
  position: relative;
}
.item {
  display: none;
  padding: 10px 20px;
  border: 1px solid #000;
}
.item.default {
  display: flex;
  justify-content: space-between;
}
.dropdown:hover .item {
  display: block;
}
.dropdown:hover .item.default {
  display: flex;
}

<ul class="dropdown">
      <li class="item default">Select <span>V</span></li>
      <li class="item">1</li>
      <li class="item">1</li>
      <li class="item">1</li>
      <li class="item">1</li>
    </ul>

【讨论】：

但问题是，这两个 div（触发器和子菜单）不靠近彼此或父母......
比它还难！你能提供沙盒的例子吗？