Question

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

基本HTML代码：

＆＃13;

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');
  });
});

＆＃13;

<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>

＆＃13;

以上代码仅适用于第1级元素，但未应用于第2级元素。第二级元素是＆＃34;下拉 - 子菜单＆＃34;类。我已经更改了类名，但是它也没有按预期工作。请帮我解决这个问题。

Answer 1

我认为你应该按照bootstrap 4导航菜单的官方文档，不管怎样我编辑了你的代码，我不知道你为什么使用first（）方法，没有必要。

官方bootsrap导航菜单： 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');
   });
});

Bootstrap菜单滑动效果

1 个答案: