Hi Guys!
I have a problem with jquery, I would like to use slidedown and up or toggle
my code
<div class="vertical-termekek"> <ul class="nav nav-pills nav-stacked col-md-3 col-sm-12 col-xs-12" id="vertical-nav"><p>Termékek</p> <li class="dropdown">
<?php
wp_nav_menu(array(
'container_id' => 'cssmenu',
'depth' => 3,
'menu_class' => 'nav nav-pills nav-stacked',
'theme_location' => 'secondary',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new CSS_Menu_Maker_Walker()
));
?></li>
</ul></div>
SCRIPT
$(document).ready(function() {
$('.vertical-termekek').click(function () {
console.log ( "someButton was clicked" );
$('li', this).slideDown(200);
});
});
Css
@media(max-width:768px) {
li.dropdown{
display:none;
}
}
Its working fine when i am full screen vertical menu not close is great i dont want to close vertical menu,by full screen
but i would like to use jquery code when i go smaller screen (992px and smaller)
I don't know what is the next step!
If i go smaller screen no hide li class but work slide up and down
it used this because i have submenu too and anybody click submenu i don't wanna to close the hole vertical menu just accordion down
$(function () {
$('.vertical-termekek').click(function () {
$('li', this).slideToggle();
});
$('.vertical-termekek li').click(function(e) {
e.stopPropagation();
});
//Resize handler to reset the menu visibility
var resizeTimer;
$(window).on('resize', function (e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
if ($(window).width() > 992) {
$('li.dropdown').show();
} else {
$('li.dropdown').hide();
}
}, 250);
});
});
but li class shown i couldnt' hide
and if i make
Css
@media(max-width:768px) {
li.dropdown{
display:none;
}
}
the slidedown and up dont work (confusing)
and slide up and down work on full screen (its bad for me) I wanna fix during full screen
thx helps!