带有全宽动画的下拉菜单答案

【问题标题】：Dropdown with animation with full width带有全宽动画的下拉菜单
【发布时间】：2017-06-20 18:14:03
【问题描述】：

我创建了简单的下拉菜单，其中子菜单是全宽的 jsFiddle

$(document).ready(function(){
        $(".drop").hide();
    $(".link-1").mouseenter(function(){
            $('.link-1-drop').slideDown("fast");
    });
    $(".link-1").mouseleave(function(){
            $('.link-1-drop').slideUp("fast");
    });
});

https://jsfiddle.net/814z6eL5/2/

由于两者是不同的 DIV，当我们将鼠标移出链接并鼠标进入 div 容器时，容器 div 会向上滑动。

有没有办法在将鼠标移动到容器时保持下拉 div 保持打开状态？

【问题讨论】：

标签： javascript jquery html css drop-down-menu

【解决方案1】：

您可以将 div 放在 li 内，这样当您将鼠标悬停在容器上时，您仍然悬停在 li 上。然后你可以在 div 上使用position:absolute;。

https://jsfiddle.net/814z6eL5/4/

【讨论】：

【解决方案2】：

将li 和slide 包装在一个元素中，并将事件分配给包装元素。在此处签入 jsFiddle 代码

Mouseenter code

【讨论】：

当你把鼠标放在li旁边时，它仍然会触发$(".link-1")做mouseenter

【解决方案3】：

您可以添加一个条件来查看.link-1-drop 是否悬停。如果 YES 则不要关闭它，如果 NO 则关闭它（离开 link1 时）

见下文

$(document).ready(function() {
  $(".drop").hide();
  $(".link-1").mouseenter(function() {
    $('.link-1-drop').slideDown("fast");
  });

  $(".link-1").mouseleave(function() {
    setTimeout(function() {
      if (!$('.link-1-drop').is(':hover')) {
        $('.link-1-drop').slideUp("fast");
      }
    }, 100);
  });

});

*{
  margin: 0;
  padding: 0;
}
.main-nav{
  width: 400px;
  display: block;
  background-color: #ccc;
  margin: 0 auto;
  height:20px
}
.drop{
  width: 100%;
  height: 250px;
  background: #0ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
  <li class="link-1">Link 1</li>
</ul>
<div class="link-1-drop drop">
  drop down content
</div>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

【讨论】：

【解决方案4】：

如果你想让你的代码在不将你的 div 放在 Main-div 中的情况下生效

只要让 sur 的 li 与 div 容器的高度相同，然后检查鼠标是否悬停在放置 div 上时离开 li 的时间，如下代码所示

$(document).ready(function(){
		$(".drop").hide();
    
    $(".link-1 ").mouseenter(function(){
            $('.link-1-drop').slideDown("fast");
    });
    
    $(".link-1").mouseleave(function(){
    	if($(".link-1-drop:not(:hover)").length>0)
            $('.link-1-drop').slideUp("fast");
    });
    
    $(".link-1-drop").mouseleave(function(){
    	if($(".link-1:not(:hover)").length>0)
            $('.link-1-drop').slideUp("fast");
    });
});

*{
  margin: 0;
  padding: 0;
}
.main-nav{
  width: 400px;
  display: block;
  background-color: #ccc;
  margin: 0 auto;
  /*commented height to match li height */
  /* height:20px;*/
}
.drop{
  width: 100%;
  height: 250px;
  background: #0ff;
  position:absolute;
  left:0;
  right:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
  <li class="link-1">Link 1</li>
</ul>
<div class="link-1-drop drop">
  drop down content
</div>

否则更好，只需将你的drop div放在li中，并通过添加来更改css

.drop {
  ...
  position:absolute;
  left:0;
}

如下片段：

$(document).ready(function() {
  $(".drop").hide();
  $(".link-1 ").mouseenter(function() {
    $('.link-1-drop').slideDown("fast");
  });
  $(".link-1").mouseleave(function() {
    $('.link-1-drop').slideUp("fast");
  });
});

* {
  margin: 0;
  padding: 0;
}

.main-nav {
  width: 400px;
  display: block;
  background-color: #ccc;
  margin: 0 auto;
  height: 20px
}

.drop {
  width: 100%;
  height: 250px;
  background: #0ff;
  position: absolute;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
  <li class="link-1">Link 1
    <div class="link-1-drop drop">
      drop down content
    </div>
  </li>
</ul>

【讨论】：