javascript - bootstrap 4 beta 2 SlideUp SlideDown 下拉菜单

Question

我的目标是在 bootstrap dropdown 元素上使用 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 文件中，我显示了所有内容，因为我认为更重要。

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

<强> Slim build

Finally, we’ve added something new to this release. Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’re releasing a “slim” version that excludes these modules. All in all, it excludes ajax, effects, and currently deprecated code. The size of jQuery is very rarely a load performance concern these days, but the slim build is about 6k gzipped bytes smaller than the regular version – 23.6k vs 30k.