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

Why does this jQuery list toggle code not work?

I totally wonder why this code doesn’t work:

$(document).ready(function() {
  $('ol ol').hide();

  $('li').click(function() {
    $(this).children('ol').toggle();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>Coffee</li>
  <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  <li>Tea</li>
  <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  <li>Milk</li>
  <li>Cool</li>
</ol>

If you click for example "Coffee", then the subordinate list should fold out. Is there a little mistake? Unfortunately, I can’t find it.

Tags:

4

Answers


  1. 0

    Your ols aren’t children of the li you’re clicking on – you need to change the markup to:

    <ol>
  <li>Coffee
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Tea  
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>
    Login or Signup to reply.
  2. 0

    Because your ol is not the children of li.

    $(document).ready(function() {
  $('ol ol').hide();

  $('li').click(function() {
    $(this).children('ol').toggle();
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>Coffee
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Tea
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>

    Or you can change your js, use next('ol') to select ol behind the li you click.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>Coffee</li>
  <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  <li>Tea</li>
  <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  <li>Milk</li>
  <li>Cool</li>
  <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
</ol>

<script>
  $(document).ready(function() {
    $('ol ol').hide();
    $('li').click(function() {
      $(this).next('ol').toggle();
    });
  });
</script>
    Login or Signup to reply.
  3. 0

    You need to put ol inside li

    $(document).ready(function() {
  $('ol ol').hide();

  $('li').click(function() {
    $(this).children('ol').toggle();
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>
    Coffee
    <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  </li>
  <li>Tea
   <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>
    Login or Signup to reply.
  4. 0 
    $(document).ready(function() {
  $('ol ol').hide();
  $('li').click(function() {
    $('ol ol').hide();
    $(this).children('ol').toggle();
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>
    Coffee
    <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  </li>
  <li>Tea
   <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>

    Try this code to open a at time one li ol.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search