bootstrap 4 beta 2 slideUp slideDown下拉列表

Question

我的目标是在bootstrap dropdown元素上使用jquery函数slideUp()和slideDown() ，以在显示时获得更漂亮的幻灯片效果。 我正在使用Bootstrap 4 beta-2 。 我在Stackoverflow上搜索了我的问题， 这是我发现的最佳结果。

我尝试了代码，但没有任何效果，似乎我的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文件中，我展示了所有内容，因为我认为这很重要。

Answer 1

我最好的猜测是，由于您使用的是jQuery的苗条版本，因此它没有所有功能。 使用完整版本。

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

以下是精简版的注释，其中删除了功能

/*! jQuery v3.2.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */

苗条的身材

最后，我们在此版本中添加了一些新内容。 有时您不需要ajax，或者您更喜欢使用许多专注于ajax请求的独立库之一。 通常，对所有Web动画使用CSS和类操作的组合会更简单。 连同包含ajax和effects模块的jQuery常规版本一起，我们发布了排除这些模块的“ slim”版本。 总而言之，它不包括ajax，效果和当前不建议使用的代码。 如今，jQuery的大小很少会涉及到负载性能，但是苗条的构建比常规版本小6k gzip压缩字节，即23.6k vs 30k。