bootstrap 4 beta 2 slideUp slideDown下拉列表

Question

我的目标是在 bootstrap下拉列表元素上使用jquery函数slideUp()和slideDown()，以便在显示时获得更漂亮的幻灯片效果。我正在使用 Bootstrap 4 beta-2 。我在Stackoverflow上搜索了我的问题， this 是我找到的最好结果。

我尝试了代码，但没有任何作用，看起来我的HTML元素得到jQuery没有在jQuery对象中正确转换，因此，我不能使用jQuery函数。

这是我的代码：

  <nav class="navbar navbar fixed-top navbar-expand-lg navbar-light bg-secondary">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon text-light"></span>
    </button>
    <a class="navbar-brand text-light tangerine d-block d-lg-none mx-auto" href="#">Site title</a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto">
        <li id="dropdown-catalogo" class="nav-item dropdown">
          <a class="nav-link dropdown-toggle text-light tangerine" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            dropdown element
          </a>
          <div id="dropdown-menu-catalogo" class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">element 1</a>
            <a class="dropdown-item" href="#">element 2</a>
            <a class="dropdown-item" href="#">element 3</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link text-light tangerine" href="#">Contatti</a>
        </li>
        <li class="nav-item d-none d-lg-block">
          <a class="navbar-brand text-light tangerine" href="#">Site name</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-light tangerine" href="#">Codici miniati</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-light tangerine" href="#">Eventi</a>
        </li>
      </ul>
    </div>
  </nav>

那页上有我的js：

$(document).ready(function() {
  $('#carosello').slick({
    infinite: false,
    slidesToShow: 2,
    slidesToScroll: 1,
    dots: true,
    responsive: [
    {
      breakpoint: 700,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: false,
        dots: true
      }
    },
    {
      breakpoint: 450,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: false,
        dots: false
      }
    }
    ]
  });

  $('#carosello-grosso').slick({
    infinite: false,
    speed: 500,
    fade: true,
    cssEase: 'linear',
    autoplay: true,
    autoplaySpeed: 3000,
  });

  var viewer = new Viewer(document.getElementById('carosello'));
  var viewerGrosso = new Viewer(document.getElementById('carosello-grosso'));

  if (window.innerWidth < 768) {
    console.log('Vengo attivato');
    $('#da-centrare').addClass('mx-auto');
  } else {
    $('#da-centrare').removeClass('mx-auto');
  }

  $(window).resize(function() {
    if (window.innerWidth < 768) {
      console.log('Vengo attivato');
      $('#da-centrare').addClass('mx-auto');
    } else {
      $('#da-centrare').removeClass('mx-auto');
    }
  });

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

  // Add slideUp animation to Bootstrap dropdown when collapsing.
  $('.dropdown').on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });

这是我得到的错误：

Uncaught TypeError: $(...).find(...).first(...).stop is not a function
    at HTMLLIElement.<anonymous> (indexScript.js:58)
    at HTMLLIElement.dispatch (jquery-3.2.1.slim.min.js:3)
    at HTMLLIElement.q.handle (jquery-3.2.1.slim.min.js:3)
    at Object.trigger (jquery-3.2.1.slim.min.js:3)
    at HTMLLIElement.<anonymous> (jquery-3.2.1.slim.min.js:3)
    at Function.each (jquery-3.2.1.slim.min.js:2)
    at r.fn.init.each (jquery-3.2.1.slim.min.js:2)
    at r.fn.init.trigger (jquery-3.2.1.slim.min.js:3)
    at a.g.toggle (dropdown.js:142)
    at HTMLAnchorElement.<anonymous> (dropdown.js:293)

在HTML代码中，我只展示了一个有趣的部分，因为它是一个很长的页面。如果你需要更多细节，请在评论中告诉我，我会更新代码。在JS文件中，我展示了所有，因为我认为更重要。