尝试将鼠标悬停在菜单项上时，下拉菜单消失

Question

我用一个下拉菜单构建了一个基本菜单。当我将鼠标悬停在主菜单项上时，会出现下拉菜单。当我尝试从下拉列表中选择一个菜单项时，它消失了。我将下拉列表放置在 ul li 元素之外，因为我需要它是全宽的，而放置在li内不允许这样做。

.HTML

<header>
    <div class="container">
        <div class="row">
            <div class="col-3">
                <a href="">Logo</a>
            </div>
            <div class="col-9">
                         <ul>
                             <li><a href="">Link 1</a></li>
                             <li class="dd-link"><a href="">Link 2</a></li>
                         </ul>
            </div>
        </div>

    <div class="dd-menu">
        <a href="">DD Menu 1</a>
        <a href="">DD Menu 2</a>
    </div>
</header>

.CSS

ul {
    list-style: none;
}
 ul li {
    display: inline-block;
}
 ul li ul li {
    display: inline-block;
}
.dd-menu {
    position:absolute;
    top: 24px;
    left: 0;
    width: 100%;
    display: none;
    background-color: #def;
}

.JS

 $('.dd-link').on({
    mouseenter: function() {
        $('.dd-menu').stop(true, true).fadeIn(fadeSpeed);
    },
    mouseleave: function() {
        $('.dd-menu').stop(true, true).fadeOut(fadeSpeed);
    }
});  

Answer 1

当您将鼠标从.dd-link移动到新显示的.dd-menu时，您实际上会触发mouseleave事件并隐藏它们。如果菜单位于触发它显示的元素类中（如下所示），那么您很好，因为您永远不会离开父元素。

你也可以用纯CSS来做到这一点，这是更可取的。jquery下面还有第二个演示来演示这一点。

---

Jquery 演示

fadeSpeed = 300;
$('.dd-link').on({
  mouseenter: function() {
    $('.dd-menu').stop(true, true).fadeIn(fadeSpeed);
  },
  mouseleave: function() {
    $('.dd-menu').stop(true, true).fadeOut(fadeSpeed);
  }
});

.dd-menu {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <ul>
  
  <li><a href="">Link 1</a></li>
    
    <li class="dd-link">
    
    <a href="">Link 2</a>
    
      <div class="dd-menu">
        <a href="">DD Menu 1</a>
        <a href="">DD Menu 2</a>
      </div>
    
    </li>
  
  </ul>
</header>

CSS演示

.menu li{
  list-style-type: none;
}
.dd-menu {
  opacity: 0;
}
.dd-link:hover .dd-menu {
  opacity: 1;
  transition: .3s;
}

<ul  class="menu">
      
      <li><a href="">Link 1</a></li>
        
        <li class="dd-link">
        
        <a href="">Link 2</a>
        
          <div class="dd-menu">
            <a href="">DD Menu 1</a><br>
            <a href="">DD Menu 2</a>
          </div>
        
        </li>
      
      </ul>

特定示例的演示

我添加了一些类和额外的样式，以使用您的结构创建典型的导航菜单。希望它有所帮助。

fadeSpeed = 300;
$('.dd-link').on({
  mouseenter: function() {
    $('.dd-menu').stop(true, true).fadeIn(fadeSpeed);
  },
  mouseleave: function() {
    $('.dd-menu').stop(true, true).fadeOut(fadeSpeed);
  }
});

.navbar {
  height: 24px;
  position: absolute;
  left: 0;
  right: 0;
  background: black;
}
ul.navmenu {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
ul.navmenu a {
  color: white;
  line-height: 24px;
  text-decoration: none;
}
ul.navmenu li {
  display: inline-block;
  margin-left: 10px;
}
.dd-menu {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  opacity: 0;
  background-color: #def;
}
.dd-link:hover .dd-menu {
  opacity: 1;
  transition: .3s;
}
ul.navmenu .dd-menu a {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="navbar">
    <ul class="navmenu">
      <li><a href="">Link 1</a></li>
      <li class="dd-link"><a href="">Link 2
        </a>
        <div class="dd-menu">
          <a href="">DD Menu 1</a>
          <a href="">DD Menu 2</a>
        </div>
      </li>
    </ul>
  </div>
</header>

Answer 2

它隐藏是因为鼠标移动到 li 之外。因此，为了使您的代码正常工作，代码需要在 li 中，或者您必须添加复杂的逻辑以查看您关注的元素是否是子菜单。

最简单的事情是简单的CSS可以使菜单在悬停时出现，不需要JavaScript。将子导航放在 li 内，并将悬停应用于您的 li。

nav ul {
  padding: 0;
  margin: 0;
}
nav li {
  list-style-type: none;
  padding: .5em;
  margin: 0;
}
nav > ul > li {
  display: inline-block;
}
nav li > ul {
  position: absolute;
  background-color: #CCC;
  max-height: 0;
  opacity:0;
  transition: max-height 0.25s ease-out, opacity 0.25s ease-out;
  overflow: hidden;
}
nav li:hover > ul,
nav li:focus-within ul {
  max-height: 500px;
  opacity: 1;
  transition: max-height 0.75s ease-out, opacity 0.75s ease-out;
}

<nav>
  <ul>
    <li>
      <a href="#">Text 1</a>
      <ul>
        <li><a href="#">Text 1 - 1</a></li>
        <li><a href="#">Text 1 - 2</a></li>
        <li><a href="#">Text 1 - 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Text 2</a>
      <ul>
        <li><a href="#">Text 2 - 1 with longer text than whatever</a></li>
        <li><a href="#">Text 2 - 2</a></li>
        <li><a href="#">Text 2 - 3</a></li>
        <li><a href="#">Text 2 - 4</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 3

您可以将相同的事件添加到.dd-menu，并且不要将.stop()方法中的jumpToEnd设置为 true：

$('.dd-link, .dd-menu').on({
  mouseenter: function() {
    $('.dd-menu').stop(true).fadeIn(fadeSpeed);
  },
  mouseleave: function() {
    $('.dd-menu').stop(true).fadeOut(fadeSpeed);
  }
});

---

演示

var fadeSpeed = 300;
$('.dd-link, .dd-menu').on({
  mouseenter: function() {
    $('.dd-menu').stop(true).fadeIn(fadeSpeed);
  },
  mouseleave: function() {
    $('.dd-menu').stop(true).fadeOut(fadeSpeed);
  }
});

ul {
  list-style: none;
}
ul li {
  display: inline-block;
}
ul li ul li {
  display: inline-block;
}
.dd-menu {
  position:absolute;
  top: 24px;
  left: 0;
  width: 100%;
  display: none;
  background-color: #def;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="container">
    <div class="row">
      <div class="col-3">
        <a href="">Logo</a>
      </div>
      <div class="col-9">
        <ul>
          <li><a href="">Link 1</a></li>
          <li class="dd-link"><a href="">Link 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="dd-menu">
    <a href="">DD Menu 1</a>
    <a href="">DD Menu 2</a>
  </div>
</header>