自举菜单滑动效应

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

我认为您应该遵循引导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');
   });
});