Responsive hiding and showing child items in the drop-down menu

Question

I have a drop-down menu that has parent categories that automatically display their child links on the desktop and hide them on mobile devices until they are clicked. If the window size is increased, the children show again.

This almost works, but after resizing the window, if I click on the parent category on the desktop, it will slide over the children elements. It will also fire several slideToggle events after resizing, and not just one.

I know this is probably due to the presence of two slideToggle () instances, but I had problems deleting one or the other instance. Sometimes they never opened on a mobile phone, so I found that both instances solved this.

I am looking for a less bloated and fully functioning solution. I appreciate all the help, and I hope to get knowledge from the answers.

Codepen

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

Run codeHide result

Answer 1

You must either delete the click event or make a condition inside the click event:

$('.top-nav-link').on('click', function(event){
    if ($(window).width()<768){
        event.preventDefault();
        $(this).parent().parent().find('.dropdown-nested-links').slideToggle();
            console.log('I worked.');
    }
});

$(window).resize(function(){
    if ($(window).width()>=768){
        $('.dropdown-nested-links').css('display', 'inline-block');
    }
});