ブートストラップ4ベータ2 slideUp slideDownドロップダウン

Question

私の目標は、それを示すときに、より美しいスライド効果を得るためにブートストラップドロップダウン要素にjQueryの機能slideUp()とslideDown()を使用することです。私はブートストラップ4ベータ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(); 
    }); 

そして、これは私が取得エラーです：HTMLで

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) 

コード長いページなので興味深い部分を示しました。あなたがそれについての詳細が必要な場合はコメントに私を教えてください。私はコードを更新します。 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

を除去して、我々は、このリリースに新しいものを追加しました。時には にはajaxが必要ない場合や、ajaxリクエストに重点を置く多くのスタンドアロンの ライブラリの1つを使用することをお勧めします。また、すべてのウェブ アニメーションに対して、CSSとクラス操作の組み合わせを と組み合わせて使用​​する方が簡単です。 ajaxとエフェクトモジュールを含むjQueryの正規版とともに、 がこれらのモジュールを除外した「スリム」バージョンをリリースしています。全体的には、現在非推奨のコードであるajax、エフェクト、および は除外されています。最近、jQueryのサイズは、ほとんどの場合負荷 のパフォーマンスに関心がありますが、スリムなビルドは約6k gzippedです。通常のバージョンより23.3k〜30k小さい バイトです。