Question

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

public static readonly DependencyProperty StartAngleX1Property =
    DependencyProperty.Register(
        "StartAngleX1",
        typeof(double),
        typeof(MyUserControl),
        new PropertyMetadata(0.0));

public double StartAngleX1
{
    get { return (double)GetValue(StartAngleX1Property); }
    set { SetValue(StartAngleX1Property, value); }
}

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

由于两者都是不同的DIV，当我们鼠标指向链接并且鼠标输入到div容器时，容器div会向上滑动。

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

Answer 1

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

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

Answer 2

将li和slide包装在一个元素中，并将事件分配给包装元素。在这里检查jsFiddle代码

Mouseenter code

Answer 3

您可以添加条件以查看.link-1-drop是否悬停。如果是，则不要关闭它，否则关闭它（离开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>

Answer 4

如果你想让你的代码生效而不将你的div放在Main-div

中

只是让我的div与div容器具有相同的高度，如果鼠标悬停在drop div上，则检查你何时离开li，如下面的代码

＆＃13;

$(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");
    });
});

＆＃13;

*{
  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;
}

＆＃13;

<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>

＆＃13;

否则更好，只需将你的drop div放入li中，然后通过添加到

进行css更改

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

如吼叫片段：

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

下拉动画全宽

4 个答案: