Clever Geek Handbook

JQuery list item icon toggle with child elements

I have a layered sidebar navigation tree with awesome font characters inside li elements. I want the icon to go from plus to minus when expanded, and back to plus when collapsed. Pressing one li should not affect the state of the other li.

This is the jQuery script I'm using:

$('.tree-toggle').click(function () {
        $(this).parent().children('ul.tree').toggle(1);
        $(this).parent().toggleClass('active');
    });

    $('.aside-list li').click(function(){
        $(this).children('label').children('i').toggleClass('fa-plus-square fa-minus-square')
        $(this).children('label').children('i').toggleClass('fa-caret-up fa-caret-down')
    });

This is my HTML structure:

<div class="well">
        <ul class="nav nav-list aside-list">
            <li>
            <label class="tree-toggle nav-header">Category <i class="fa fa-caret-down"></i></label>
                <ul class="nav nav-list tree">
                    <li><label class="tree-toggle nav-header"><i class="fa fa-plus-square"></i> In id sodales leo</label>
                        <ul class="nav nav-list tree">
                            <li><label class="tree-toggle nav-header"><i class="fa fa-plus-square"></i> Tortor masa</label>
                                <ul class="nav nav-list tree">
                                <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                                <li><a href="#">Adipiscing elit</a></li>
                                    <li><label class="tree-toggle nav-header"><i class="fa fa-plus-square"></i> Integro commodo</label>
                                        <ul class="nav nav-list tree">
                                            <li><a href="#">Colors</a></li>
                                            <li><a href="#">Sizes</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul><!-- end aside-list -->
    </div><!-- end well -->

The functionality is currently broken, as clicking on one item changes the icon state of all items in the list.

I made a JS fiddle for the code:
https://jsfiddle.net/njm9Lz4e/#&togetherjs=PRGpaib46U

+3


source to share


2 answers


When you open the LI element, you will find other LI elements.
Pushing that inner LI - the click will propagate to the parent LI causing your problem, so

prevent click from propagating to parent elements such as:



$('.aside-list li').click(function(evt) {
   evt.stopPropagation();

JsFiddle example

+4


source


Use event.target

for li

clicks, it works great.



$('.tree-toggle').click(function() {
      $(this).parent().children('ul.tree').toggle(1);
      $(this).parent().toggleClass('active');
    });

    $('.aside-list li').click(function(event) {
      $(event.target).children('label').children('i').toggleClass('fa-plus-square fa-minus-square')
      $(event.target).children('label').children('i').toggleClass('fa-caret-up fa-caret-down')
    });
      

        
        
        
      

    
.tree {
  display: none
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="well">
        <ul class="nav nav-list aside-list">
            <li>
            <label class="tree-toggle nav-header">Category <i class="fa fa-caret-down"></i></label>
                <ul class="nav nav-list tree">
                    <li><label class="tree-toggle nav-header"><i class="fa fa-plus-square"></i> In id sodales leo</label>
                        <ul class="nav nav-list tree">
                            <li><label class="tree-toggle nav-header"><i class="fa fa-plus-square"></i> Tortor masa</label>
                                <ul class="nav nav-list tree">
                                <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                                <li><a href="#">Adipiscing elit</a></li>
                                    <li><label class="tree-toggle nav-header"><i class="fa fa-plus-square"></i> Integro commodo</label>
                                        <ul class="nav nav-list tree">
                                            <li><a href="#">Colors</a></li>
                                            <li><a href="#">Sizes</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul><!-- end aside-list -->
    </div><!-- end well -->
Run codeHide result


0


source






More articles:


All Articles