Question

所以我在animate.css中使用bootstrap菜单（例如 - 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'>

Animate.css改变起始位置

2 个答案: