Question

I’m currently working on a navigation and have run into some trouble. It has a fixed nav, with a slideToggle menu for children of the navigation. I need to have the “li” with a class of “parent” return false so it doesn’t jump back to the top of the page when clicked. However, when I do this it disables all the children links. Is it possible to just target the parent itself and return just that one false?

HTML:

<nav>
 <ul>
  <li><a href="#"></a></li>
  <li class="parent">
    <a href="#"></a>
    <ul>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
    </ul>
  </li>
  <li><a href="#"></a></li>
 </ul>
</nav>

JS:

$("li.parent").click(function(){
   $(this).children("ul").slideToggle(300);
   return false;
});

Answer 1

So I found a solution by using and if statement and .preventDefault()

The following code is what I ended up with

$("li.parent").click(function(e){
  if($(this).children("ul").is(':hidden')) {
      e.preventDefault();
  };
  $(this).children("ul").first().slideToggle(300);
});