Jquery submenu: li elements are still toggling

Question

I tried to figure this out for a few hours, and since I'm pretty new to jQuery, and I'm definitely still new, I really need help. I am trying to create navigation with a submenu in it. Everything works as intended, but I lack the way in which I can stop the elements of the submenu list from switching.

HTML:

<nav>
      <ul id="site-nav">
        <li><a href="#">Main Nav Item 1</a></li>
        <li><a href="#">Main Nav Item 2 (with submenu)</a>
          <ul>
            <li><a href="#">Submenu Item 1</a></li>
            <li><a href="#">Submenu Item 2</a></li>
            <li><a href="#">Submenu Item 3</a></li>
          </ul>
        </li>
        <li><a href="#">Main Nav Item 3 (with submenu)</a>
          <ul>
            <li><a href="#">Submenu Item 1</a></li>
            <li><a href="#">Submenu Item 2</a></li>
          </ul>
        </li>
        <li><a href="#">Main Nav Item 4</a></li>
        <li><a href="#">Main Nav Item 5</a></li>
      </ul>
    </nav>

JQuery (part of the submenu):

$(document).ready(function() {

  var subnavArrow = ['<div id="subnavArrow"></div>'];
      subpull     = $('header nav ul li');
      submenu     = $('header nav ul li ul');
      submenuitems = $('header nav ul li ul li');

  subpull.has('ul').prepend(subnavArrow);

  $('header nav ul li').has('ul').click(function() {
    $(this).children('ul').toggle('slow');
  });

});

If you do not understand what I mean, I try to explain it the way I can:

I want to open the main item of the Nav Nav Item by clicking on it (Main Nav Item 2). This works as intended, and I can also close it again, but if I click on the “Main Nav Item 2” submenu item, it will close the Main Nav Item 2 submenu.

Answer 1

, anchor div,

$(document).ready(function() {

  var subnavArrow = ['<div id="subnavArrow"></div>'];
  subpull = $('header nav ul li');
  submenu = $('header nav ul li ul');
  submenuitems = $('header nav ul li ul li');

  subpull.has('ul').prepend(subnavArrow);

  $('header nav ul li').has('ul').click(function(e) {
    if ($(e.target).closest('li').is(this)) {
      $(this).children('ul').toggle('slow');
    }
  });

});

#subnavArrow:after {
  content: '<<'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <ul id="site-nav">
      <li><a href="#">Main Nav Item 1</a>
      </li>
      <li><a href="#">Main Nav Item 2 (with submenu)</a>
        <ul>
          <li><a href="#">Submenu Item 1</a>
          </li>
          <li><a href="#">Submenu Item 2</a>
          </li>
          <li><a href="#">Submenu Item 3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Main Nav Item 3 (with submenu)</a>
        <ul>
          <li><a href="#">Submenu Item 1</a>
          </li>
          <li><a href="#">Submenu Item 2</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Main Nav Item 4</a>
      </li>
      <li><a href="#">Main Nav Item 5</a>
      </li>
    </ul>
  </nav>
</header>

Answer 2

• #ID. . .subnavArrow
• jQuery #site-nav
• Event.stopPropagation() ( li > ul)
• var ,

$(function() { // DOM ready

  var $LIsub = $("#site-nav li:has(ul)");

  $LIsub.children("a").append('<span class="subnavArrow"/>');
  
  $LIsub.click(function(e) {
    e.stopPropagation();
    $(this).find('> ul').slideToggle('slow');
  });

});

#site-nav li ul{
  display:none;
}
.subnavArrow:after{
  content:"\25BC"
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <ul id="site-nav">
      <li><a href="#">Main Nav Item 1</a></li>
      <li><a href="#">Main Nav Item 2</a>
        <ul>
          <li><a href="#">Submenu Item 1</a></li>
          <li><a href="#">Submenu Item 2</a></li>
          <li><a href="#">Submenu Item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Main Nav Item 3</a>
        <ul>
          <li><a href="#">Submenu Item 1</a></li>
          <li><a href="#">Submenu Item 2</a></li>
        </ul>
      </li>
      <li><a href="#">Main Nav Item 4</a></li>
      <li><a href="#">Main Nav Item 5</a></li>
    </ul>
  </nav>
</header>

Answer 3

, <li> click <li> , <ul>.

.has('ul') :

$(document).ready(function() {

    var subnavArrow = ['<div id="subnavArrow"></div>'];
    subpull = $('header nav ul li');
    submenu = $('header nav ul li ul');
    submenuitems = $('header nav ul li ul li');

    subpull.has('ul').prepend(subnavArrow);

    $('header nav ul li').click(function(e) {
        e.stopPropagation();
        if ($(this).has('ul')) {
            $(this).children('ul').toggle('slow');
        }
    });

});

, , e.stopPropagation();

You can use this solution on this JSFiddle: https://jsfiddle.net/9ejpLmLf/

Answer 4

Very simple code
=============================
<pre>
$(document).ready(function() {

  var subnavArrow = ['<div id="subnavArrow"></div>'];
      subpull     = $('header nav ul li');
      submenu     = $('header nav ul li ul');
      submenuitems = $('header nav ul li ul li');

  subpull.has('ul').prepend(subnavArrow);

  $('header nav ul li a').click(function() {
    $(this).siblings('ul').toggle('slow');
  });

});
</pre>