Exploring the implementation of toggling functionality for nested children within <li> elements using jQuery

Question

Exploring the implementation of toggling functionality for nested children within <li> elements using jQuery

Unable to get the toggle function working on child nodes. Can someone assist me with this issue?

$(document).ready(function() {
  $('label.tree-toggler').click(function() {
    $(this).parent().children('ul.tree').toggle(300);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-list">
  <li><label class="tree-toggler nav-header">WorkLoad</label>
    <ul class="nav nav-list tree">
      <li><label class="tree1">DME Report</label>
        <ul class="tree1">
          <li>
            <a href="search.php">Report1</a>
            <a href="search.php">Report2</a>
          </li>
        </ul>
      </li>
      <li><a href="update.php">CAMB Report</a></li>
      <li><a href="index2.php">LMAB Report</a></li>
      <li><a href="#">DMF Notification</a></li>
      <li><a href="#">LME Forecast Report</a></li>
    </ul>
  </li>
</ul>

javascript jquery html css

Answer 1

Answer №1

To implement a generic solution, you can attach the click event handler specifically to the li elements that contain child ul elements using the :has selector. Then, within the click handler, you can use the toggle() function to show or hide those ul elements.

It is important to remember that in order to prevent the parent li elements from closing their child ul elements as well, the event handler should include a call to stopPropagation(). Here is an example of how this can be achieved:

$(document).ready(function() {  
  $('ul > li:has(ul)').click(function(e) {
    e.stopPropagation();
    $(this).find('> ul').toggle(300);
  });
});

ul > li > ul {
  display: none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-list">
  <li>
    <label class="nav-header">WorkLoad</label>
    <ul class="nav nav-list tree">
      <li>
        <label class="tree1">DME Report</label>
        <ul class="tree1">
          <li>
            <a href="search.php">Report1</a>
            <a href="search.php">Report2</a>
          </li>
        </ul>
      </li>
      <li><a href="update.php">CAMB Report</a></li>
      <li><a href="index2.php">LMAB Report</a></li>
      <li><a href="#">DMF Notification</a></li>
      <li><a href="#">LME Forecast Report</a></li>
    </ul>
  </li>
</ul>

Answer 2

To implement a generic solution, you can attach the click event handler specifically to the li elements that contain child ul elements using the :has selector. Then, within the click handler, you can use the toggle() function to show or hide those ul elements.

It is important to remember that in order to prevent the parent li elements from closing their child ul elements as well, the event handler should include a call to stopPropagation(). Here is an example of how this can be achieved:

$(document).ready(function() {  
  $('ul > li:has(ul)').click(function(e) {
    e.stopPropagation();
    $(this).find('> ul').toggle(300);
  });
});

ul > li > ul {
  display: none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-list">
  <li>
    <label class="nav-header">WorkLoad</label>
    <ul class="nav nav-list tree">
      <li>
        <label class="tree1">DME Report</label>
        <ul class="tree1">
          <li>
            <a href="search.php">Report1</a>
            <a href="search.php">Report2</a>
          </li>
        </ul>
      </li>
      <li><a href="update.php">CAMB Report</a></li>
      <li><a href="index2.php">LMAB Report</a></li>
      <li><a href="#">DMF Notification</a></li>
      <li><a href="#">LME Forecast Report</a></li>
    </ul>
  </li>
</ul>

Answer 3

Answer №2

Streamlining the code above can be achieved by:

The code presented below functions as intended, with minor adjustments needed...

$(document).ready(function() {
  $('label.tree-toggler, label.tree1').click(function() {
    $(this).parent().children('ul.tree , ul.tree1').toggle(300);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav nav-list">
  <li><label class="tree-toggler nav-header">WorkLoad</label>
    <ul class="nav nav-list tree>
      <li><label class="tree1">DME Report</label>
        <ul class="tree1">
          <li>
            <a href="search.php">Report1</a>
            <a href="search.php">Report2</a>
          </li>
        </ul>
      </li>
      <li><a href="update.php">CAMB Report</a></li>
      <li><a href="index2.php">LMAB Report</a></li>
      <li><a href="#">DMF Notification</a></li>
      <li><a href="#">LME Forecast Report</a></li>
    </ul>
  </li>
</ul>

Answer 4

Streamlining the code above can be achieved by:

The code presented below functions as intended, with minor adjustments needed...

$(document).ready(function() {
  $('label.tree-toggler, label.tree1').click(function() {
    $(this).parent().children('ul.tree , ul.tree1').toggle(300);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav nav-list">
  <li><label class="tree-toggler nav-header">WorkLoad</label>
    <ul class="nav nav-list tree>
      <li><label class="tree1">DME Report</label>
        <ul class="tree1">
          <li>
            <a href="search.php">Report1</a>
            <a href="search.php">Report2</a>
          </li>
        </ul>
      </li>
      <li><a href="update.php">CAMB Report</a></li>
      <li><a href="index2.php">LMAB Report</a></li>
      <li><a href="#">DMF Notification</a></li>
      <li><a href="#">LME Forecast Report</a></li>
    </ul>
  </li>
</ul>

Exploring the implementation of toggling functionality for nested children within <li> elements using jQuery

Answer №1

Answer №2

Similar questions

Tips for setting extra field values in the CKEditor image dialog during editing

Using JavaScript to set the value of an input text field in HTML is not functioning as expected

Issues with displaying HTML video content

Dynamic sliding box jumps instead of simply fading in/out

MySQL conditions in game development

A guide on altering the color of a badge through programming

The Access-Control-Allow-Headers request header field is not permitted as per the Access-Control-Allow-Headers directive

Is it really necessary to still think poorly of JavaScript in 2011?

When fetching data from the API in Angular, the response is displayed as an object

Is there a way for me to retrieve the UrlMatcher from ui-router?

Animating Font Awesome content through CSS transitions

Activate the button when the password is correct

Leveraging tailwind for achieving dynamic height responsiveness

What is the best method for storing pug-formatted data in a database?

Connecting Ag Grid with modules

Is it possible for an object hidden in the DOM using jQuery to magically reappear when you click the back button or use the bfc

Retrieve distinct values for the keys from an object array in JavaScript

Does the sliding transition between views function properly, even though the view appears on top of the header and behind the footer

Top method to create a timer in React/Redux for automatically refreshing authentication tokens

Thumbnails failing to line up in a continuous row