I have a dropdown menu that has parent categories that display their children links automatically on Desktop and hide them on mobile until they are clicked. If the window is sized back up the children show again.
This almost works but after resizing the window, if I click the parent category on Desktop it will slideToggle the children elements. It will also run multiple slideToggle events after resizing rather than just one.
I am aware it is likely due to having two instances of slideToggle() but I was having issues when removing one or the other instances. Sometimes they would never open on mobile so I found putting both instances solved this.
I am looking for a less bloated and fully functioning solution. I appreciate all help and I hope to gain knowledge from the answers.
//Start Ignore
$('li.dropdown a').on('click', function (event) {
$(this).parent().toggleClass('open');
});
$('body').on('click', function (e) {
if (!$('li.dropdown').is(e.target)
&& $('li.dropdown').has(e.target).length === 0
&& $('.open').has(e.target).length === 0
) {
$('li.dropdown').removeClass('open');
}
});
//End Ignore
/**** CODE I NEED HELP WITH BELOW ****/
$(window).resize(function(){
if ($(window).width()<768){
$('.top-nav-link').on('click', function(event){
event.preventDefault();
$(this).parent().parent().find('.dropdown-nested-links').slideToggle();
console.log('I worked.');
});
}else{
$('.dropdown-nested-links').css('display', 'inline-block');
}
});
if ($(window).width()<768){
$('.top-nav-link').on('click', function(event){
event.preventDefault();
$(this).parent().parent().find('.dropdown-nested-links').slideToggle();
});
}else{
$('.dropdown-nested-links').css('display', 'inline-block');
}
$(window).resize(function(){
if ($(window).width()>768){
//Expands the links when resized back to Desktop
$('.dropdown-nested-links').css('display', 'inline-block');
}else{
//Hides the category dropdown when resized back down to mobile
$('.dropdown-nested-links').css('display','none')
}
});.dropdown-nested-links{
padding:0;
display:none;
}
@media only screen and (min-width:768px){
.dropdown-nested-links{
padding:0;
display:inline-block;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav learn-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">Click Me <span class="glyphicon glyphicon-menu-down"></span></a>
<ul class="dropdown-menu">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 dropdown-section">
<li><a href="#" class="top-nav-link">Parent 1</a></li>
<ul class="dropdown-nested-links">
<li><a href="#" class="nested-nav-link"><span></span>Child</a></li>
<li><a href="#" class="nested-nav-link"><span></span>Child</a></li>
<li><a href="#" class="nested-nav-link"><span></span>Child</a></li>
</ul>
</div>
<div class="col-sm-6 dropdown-section inverse-section">
<li><a class="top-nav-link" href="#">Parent 2</a></li>
<ul class="dropdown-nested-links">
<li><a href="#" class="nested-nav-link"><span></span>Child</a></li>
<li><a href="#" class="nested-nav-link"><span></span>Child</a></li>
</ul>
</div>
</ul>
</li>
</ul>
</nav>