Animate.css更改开始位置

所以我使用animate.css引导菜单（例如 - https://jsfiddle.net/wpf9whd6/1/）。问题是，如果我点击按钮，菜单开始加载按钮上方。想要的效果是它会在按钮下面开始加载，所以它看起来像菜单滑出按钮。Animate.css更改开始位置

JS：

$(document).ready(function(){ 
    $('.dropdown-submenu a.test').on("click", function(e){ 
    $(this).next('ul').toggle(); 
    e.stopPropagation(); 
    e.preventDefault(); 
    }); 
});

HTML：

<br /> 
    <br /> 
    <br /> 
    <div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu slideInDown animated"> 
     <li><a tabindex="-1" href="#">HTML</a></li> 
     <li><a tabindex="-1" href="#">CSS</a></li> 
     <li class="dropdown-submenu"> 
     <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
      <li class="dropdown-submenu"> 
      <a class="test" href="#">Another dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">3rd level dropdown</a></li> 
       <li><a href="#">3rd level dropdown</a></li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </div>

来源

2017-07-24 Vdas Dorls

您可以将下拉列表包装到具有视口高度的元素中，或者只包含某种可容纳下拉列表高度（页面包装或其他）的高度，隐藏overflow-y，这样滑动菜单的起点就隐藏起来了，但底部不是。然后使用z-index将按钮放在下拉菜单上。

$(document).ready(function() { 
 
    $('.dropdown-submenu a.test').on("click", function(e) { 
 
    $(this).next('ul').toggle(); 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    }); 
 
});

.dropdown-toggle { 
 
    z-index: 1001; 
 
    position: relative; 
 
} 
 

 
.wrapper { 
 
    overflow-y: hidden; 
 
    height: 100vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/> 
 
https://jsfiddle.net/wpf9whd6/#update 
 
<br /> 
 
<br /> 
 
<br /> 
 
<div class="wrapper"> 
 

 
    <div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials 
 
     <span class="caret"></span></button> 
 
    <ul class="dropdown-menu slideInDown animated"> 
 
     <li><a tabindex="-1" href="#">HTML</a></li> 
 
     <li><a tabindex="-1" href="#">CSS</a></li> 
 
     <li class="dropdown-submenu"> 
 
     <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
      <li class="dropdown-submenu"> 
 
      <a class="test" href="#">Another dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">3rd level dropdown</a></li> 
 
       <li><a href="#">3rd level dropdown</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

来源

2017-07-24 15:02:55

看样子，你可以简单地添加样式到<ul class="dropdown-menu slideInDown animated">我把margin-top，它移动了它，只是使它在任何你想开始。这里是我使用的线<ul class="dropdown-menu slideInDown animated" style='margin-top:100px !important'>

来源

2017-07-24 14:57:53 CumminUp07

这并不而不下移菜单的工作，那就是 - https://jsfiddle.net/wpf9whd6/2/。 –

@VdasDorls似乎是正在使用的动画，它只是出现，然后整个事情滑落，使用该动画无法使其从按钮下方开始，而不是最终降低 – CumminUp07

Animate.css更改开始位置

回答

相关问题