Question 35739 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Display sub menu with javascript – Jquery

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.

Tags:

2

Answers


  1. 0

    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;
    }
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search