How to toggle submenu with jQuery when parent is clicked

Question

I made a dropdown vertical menu, after troubleshooting still cannot figure out why the submenu toggle isn't working as it should. I set the submenu in CSS to hide it initially, when the parent list item is clicked I would like the jQuery to toggle. Currently, there's no bug in the browser console, but the toggling is not working properly.

Any help will be greatly appreciated. Thanks!

Jquery:

$("li.menu-item-has-children .toggle").click(function(e){
  e.preventDefault();
  $(this).next('.submenu').toggle();

});

HTML

<nav class="navigation">
                <ul class="menu nav-menu">
                  <li class="menu-item menu-item-has-children"><a href="#" class="menu-link main-menu-link">Logo
                    <span class="toggle">
                  <i class="fas fa-chevron-right"></i>
                    </span>

                  </a>
                  <ul class="submenu">
                    <li>sub list</li>
                  </ul>




                </li>
                  <li class="menu-item menu-item-has-children"><a href="#" class="menu-link main-menu-link">Fonts
                    <span class="toggle">
                  <i class="fas fa-chevron-right"></i>
                    </span>
                  </a></li>
                </ul>
              </nav>

CSS:

.nav-menu li.menu-item-has-children {
    position: relative;
}
.nav-menu li a{
  color: #0a0a0a;
    display: block;
    font-weight: 400;

    position: relative;
    padding: 10px 40px 10px 20px;
    font-size: .875rem;
    line-height: 1.25rem;

}
.nav-menu li.menu-item-has-children .toggle {
  position:absolute;
  right:0;
  transition: transform 400ms cubic-bezier(1,0,1,1),-webkit-transform 400ms cubic-bezier(1,0,1,1),-o-transform 400ms cubic-bezier(1,0,1,1);
}
 .submenu{
  display:none;
}

Answer 1

Please change your script to this

$("li.menu-item-has-children").click(function(e){
    e.preventDefault();
    $(this).find('.submenu').toggle();
});