Bootstrap 菜单滑动效果

Question

我想为引导菜单添加滑动效果（slideUp 和 slideDown）。 我在下面写了 JavaScript 代码。

基本 HTML 代码：

jQuery('.dropdown').on('show.bs.dropdown', function(e) {
  jQuery(this).find('.dropdown-menu').first().stop(true, true).slideDown(800);
});
jQuery('.dropdown').on('hide.bs.dropdown', function(e) {
  e.preventDefault();
  jQuery(this).find('.dropdown-menu').first().stop(true, true).slideUp(800, function() {
    jQuery(this).parent().removeClass('open');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<ul class="menu menu--main nav navbar-nav">
  <li class="expanded dropdown open">
    <ul class="dropdown-menu">
      <li class="expanded dropdown-submenu">
        <ul class="dropdown-menu">
          <li><a href="/node/1" data-drupal-link-system-path="node/1">One</a></li>
          <li><a href="/node/2" data-drupal-link-system-path="node/2">Two</a></li>
          <li><a href="/node/3" data-drupal-link-system-path="node/3">Three</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

以上代码仅适用于第一级元素，而不适用于第二级元素。 第二级元素具有“下拉子菜单”类。我已经更改了类名，但它也没有按预期工作。 请帮我解决这个问题。

Answer 1

我认为你应该遵循 bootstrap 4 导航菜单的官方文档，无论如何我编辑了你的代码，我不知道你为什么使用 first() 方法，没有必要。

官方引导导航菜单： https://getbootstrap.com/docs/4.0/components/navbar/

试试下面的代码。让我知道你的回应

jQuery('.dropdown').on('show.bs.dropdown', function(e){
  jQuery(this).find('.dropdown-menu').stop(true, true).slideDown(800);
});

jQuery('.dropdown').on('hide.bs.dropdown', function(e){
  // e.preventDefault();
  var self = $(this);
  jQuery(this).find('.dropdown-menu').stop(true, true).slideUp(800, function(){
    self.removeClass('open');
   });
});