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

时间：2019-01-04 20:41:58

标签： jquery

我用一个下拉菜单构建了一个基本菜单。当我将鼠标悬停在主菜单项上时，将显示下拉菜单。当我尝试从下拉菜单中选择菜单项时，它消失了。我已将下拉列表放置在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);
    }
});

3 个答案:

答案 0 :(得分：2)

将鼠标从.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>

答案 1 :(得分：1)

它是隐藏的，因为鼠标移到了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>

答案 2 :(得分：0)

您可以将相同的事件添加到.dd-menu，而不必将jumpToEnd方法中的.stop()设置为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>

相关问题
最新问题