Display sub menu with javascript

Question

I designed a menu for WordPress as follows:

HTML:

 <aside class="menu">
    <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.

NoTearsInMyTea · Accepted Answer · 2022-12-25 16:04:24Z

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 class="menu">

        <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;
    }

My problem is related to the script code part. If the user clicks on any li, show it if it has ul. By changing the css, all sub-menus are displayed, which I don't want.

Poku · Accepted Answer · 2022-12-25 22:25:04Z

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 class="menu">
    <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>

Collectives™ on Stack Overflow

Display sub menu with javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related