Animate.css 改变起始位置

Question

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

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>

Answer 1

您可以将下拉菜单包装在具有视口高度的元素中，或者只是某种可以容纳下拉菜单高度的高度（页面包装器或其他），隐藏 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>

Answer 2

看来您可以简单地向<ul class="dropdown-menu slideInDown animated"> 添加样式，我输入了margin-top 并且它移动了它，只需将它放在您想要开始的任何地方。这是我使用的行<ul class="dropdown-menu slideInDown animated" style='margin-top:100px !important'>