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。