bootstrap 4 beta 2 slideUp slideDown dropdown

Question

My goal is to use the jquery functions slideUp() and slideDown() on the bootstrap dropdown element for get a more beautiful slide effect when showing it. I'm using Bootstrap 4 beta-2 . I searched on Stackoverflow for my problem and this was the best result that I found.

I tried the code but nothing works, it seems like my HTML element gets with jQuery is not correctly transformed in jQuery object and for this reason, I can't use jQuery function.

Here is my code:

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

And there is my js on that page:

$(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();
  });

And this is the error that I get:

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)

In HTML code I showed just the interesting part because is a long page. if you need more details about it tell me in the comment and I will update the code. While in JS file I showed all because I thought was more important.

Answer 1

My best guess is since you are using slim version of jQuery it don't have all features. Use the full version.

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

Below is the comment from the slim version with the features removed

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