how to separate click event from siblings?

Question

I finally got my nav to show and hide the submenu on click, but what's happening now is that when I click, to have it slideToggle, is affecting its siblings and opening and closing at the same time.

my structure look something like this:

<nav>
  <ul>
    <li class="has-children"><a href="#">Home
      <span class="arrow arrow-down"></span>
      </a>
       <ul class="top-menu">
        <li class="has-children"><a href="#">Item1
          <span class="arrow arrow-down arrow-right"></span>
          </a>
           <ul class="submenu">
            <li><a href="#">SubItem - 1 </a></li>    
            <li><a href="#">SubItem - 2 </a></li>
            <li><a href="#">SubItem - 3</a></li>
            <li><a href="#">SubItem - 4 </a></li>
            <li><a href="#">SubItem - 5 </a></li>
          </ul>
         </li>   
        <li class="has-children"><a href="#">Item - 2
          <span class="arrow arrow-down arrow-right"></span>
          </a>
           <ul class="submenu">
            <li><a href="#">SubItem - 1 </a></li>    
            <li><a href="#">SubItem - 2 </a></li>
            <li><a href="#">SubItem - 3</a></li>
            <li><a href="#">SubItem - 4 </a></li>
            <li><a href="#">SubItem - 5 </a></li>
          </ul>
         </li>
        <li class="has-children"><a href="#">Item - 3
          <span class="arrow arrow-down arrow-right"></span>
          </a>
           <ul class="submenu">
            <<li><a href="#">SubItem - 1 </a></li>    
            <li><a href="#">SubItem - 2 </a></li>
            <li><a href="#">SubItem - 3</a></li>
            <li><a href="#">SubItem - 4 </a></li>
            <li><a href="#">SubItem - 5 </a></li>
          </ul>
         </li>
        <li><a href="#">Item - 4 </a></li>
        <li><a href="#">Item - 5 </a></li>
      </ul>
    
    </li>    
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

and this is my jQuery:

$('.has-children ul').click(function(e){
    e.stopPropagation();
    var el = (event.target || event.srcElement);
    console.log('clicked');
    $(this).find('ul.submenu').slideToggle();
     $(el).find('span').toggleClass('arrow-down arrow-up');
  });

So if I click on the li with the class of has children, all my uls with class of submenu are opening at the same time. Perhaps I am doing more than I am supposed to here, all the help would be appreciate it.

Answer 1

by using this code toggle sub item when click on Item and when click on sub item it wont toggle item

  $('.has-children > a').click(function (e) {
        e.stopPropagation();
        var el = (event.target || event.srcElement);
        console.log('clicked');
        $(this).parent().find('ul.submenu').slideToggle();
        $(el).find('span').toggleClass('arrow-down arrow-up');
    });

Answer 2

Your event listener should be on .has-children, and you only want to go one level deep in your $.find() which you can do with $.find('> ul')

$('.has-children').click(function(e) {
  e.stopPropagation();
  var el = (event.target || event.srcElement);
  console.log('clicked');
  $(this).find('> ul').slideToggle();
  $(el).find('span').toggleClass('arrow-down arrow-up');
});

.submenu, .top-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li class="has-children"><a href="#">Home
      <span class="arrow arrow-down"></span>
      </a>
       <ul class="top-menu">
        <li class="has-children"><a href="#">Item1
          <span class="arrow arrow-down arrow-right"></span>
          </a>
           <ul class="submenu">
            <li><a href="#">SubItem - 1 </a></li>    
            <li><a href="#">SubItem - 2 </a></li>
            <li><a href="#">SubItem - 3</a></li>
            <li><a href="#">SubItem - 4 </a></li>
            <li><a href="#">SubItem - 5 </a></li>
          </ul>
         </li>   
        <li class="has-children"><a href="#">Item - 2
          <span class="arrow arrow-down arrow-right"></span>
          </a>
           <ul class="submenu">
            <li><a href="#">SubItem - 1 </a></li>    
            <li><a href="#">SubItem - 2 </a></li>
            <li><a href="#">SubItem - 3</a></li>
            <li><a href="#">SubItem - 4 </a></li>
            <li><a href="#">SubItem - 5 </a></li>
          </ul>
         </li>
        <li class="has-children"><a href="#">Item - 3
          <span class="arrow arrow-down arrow-right"></span>
          </a>
           <ul class="submenu">
            <li><a href="#">SubItem - 1 </a></li>    
            <li><a href="#">SubItem - 2 </a></li>
            <li><a href="#">SubItem - 3</a></li>
            <li><a href="#">SubItem - 4 </a></li>
            <li><a href="#">SubItem - 5 </a></li>
          </ul>
         </li>
        <li><a href="#">Item - 4 </a></li>
        <li><a href="#">Item - 5 </a></li>
      </ul>
    
    </li>    
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 3

try this code (i have added more correct span finding)

$('.has-children ul').click(function(e){
e.stopPropagation();
var el = (event.target || event.srcElement);
console.log('clicked');
$(this).find('ul.submenu').slideToggle();
 $(this).parent().find('span').toggleClass('arrow-down arrow-up');
});