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更改開始位置

回答

相關問題