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.
