Display sub menu with javascript-CodePudding

I designed a menu for WordPress as follows:

HTML:

 <aside >
    <ul>
      <li>
          Main
          <ul>
              <li>
                  **** Under the first menu ****
                  <li>
                      Content first
                  </li>
                  <li>
                      Content second
                  </li>
                  <li>
                      Content third
                      <ul>
                          <li>
                              **** Under the second menu ****
                              <li>
                                  Content first
                              </li>
                              <li>
                                  Content second
                              </li>
                              <li>
                                  Content third
                              </li>
                          </li>
                      </ul>
                  </li>
              </li>
          </ul>
      </li>
  </ul>
  <aside>

CSS:

.menu > ul > li > ul {
    display: none;
}

And using this script code, I have defined a condition that by clicking on li, if there is ul in it, it will be displayed:

$('.menu').find('li').click(function(evt) {
    evt.stopPropagation();
    $(this).children('ul').toggle();
});

This code works fine; But when several other li are used inside the li, the condition I put will no longer work and only the first sub-menu will be displayed.

Is there a way to make my script code work properly?

My problem is only related to the script code.

CodePudding user response：

You should move the ul content you want to be toggleable into the clickable li:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .menu ul li ul {
        display: none;
      } 
      </style>
  </head>
  <body>
    <div id="app"></div>
    <aside >
    <ul>
      <li>
          Main
          <ul>
              <li>
                  **** Under the first menu ****
                  <li>
                      Content first
                  </li>
                  <li>
                      Content second
                  </li>
                  <li>
                      Content third
                      <ul>
                          <li>
                              **** Under the second menu ****
                              <li>
                                  Content first
                              </li>
                              <li>
                                  Content second
                              </li>
                              <li>
                                  Content third
                              </li>
                          </li>
                      </ul>
                  </li>
              </li>
          </ul>
      </li>
  </ul>
  <aside>
  </body>
  <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"
  ></script>
<script >
  $('.menu').find('li').click(function(evt) {
    evt.stopPropagation();
    $(this).children('ul').toggle();
});
</script>
</html>

CodePudding user response：

If you want to just have the 2nd level of the menu visible after opening, you need to do your CSS like this:

.menu > ul > li > ul {
    display: none;
}

This way you will be selecting direct children of the elemen, more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator

However, if you also want for the 2nd level of menu to be open on click, you need to move your <ul> and put it directly with your <li>, like this:

<aside >

        <ul>
            <li>
                Main
                <ul>
                    <li>
                        **** Under the first menu ****
                        <li>
                            Content first
                        </li>
                        <li>
                            Content second
                        </li>
                        <li>
                            Content third
                        <ul>
                            <li>
                                **** Under the second menu ****
                                <li>
                                    Content first
                                </li>
                                <li>
                                    Content second
                                </li>
                                <li>
                                    Content third
                                </li>
                            </li>
                        </ul>
                        </li>
                    </li>
                </ul>
            </li>
        </ul>
    </aside>

and change your CSS to this:

   .menu ul > li > ul {
        display: none;
    }