Wie gleite ich ein Bootstrap-Glyphicon in Listenelemente mit jquery?

Question

Ich muss Bootstrap Glyphe Symbol plus Symbol auf der Unterseite des letzten Kindes jedes Elternteils rutschen. Wie kann ich das machen. Click here JS Fiddle

zB:

Elternteil hat Artikel 1 und Kind hat Artikel 1.1, Artikel 1.2, Punkt 1.3. Wenn wir auf den Eltern klicken. Ich muss das Glyph-Symbol auf der Unterseite jedes Kindes anzeigen.

HTML

<span id="slidedown">Slide down</span> 
<table class="table table-striped table-responsive"> 
     <thead> 
      <tr> 
       <th>Nombre</th> 
       <th>Continente</th> 
       <th>Capital</th> 
       <th>Lengua</th> 
       <th>Habitantes</th> 
       <th>Moneda</th> 
       <th></th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody> 
          <tr><td colspan="0"> 
    <div style="" class="row"> 
     <div style="" class="form-group col-md-12"> 
      <div style="" class="col-md-2"> 
       <label for="name" class="control-label">Nombre</label> 
      </div> 
      <div style="" class="col-md-10"> 
       <input class="form-control" autocomplete="off" placeholder="Nombre del país" id="update-name" name="name" value="France" type="text"> 
      </div> 
     </div> 
     <div style="" class="form-group col-md-12"> 
      <div style="" class="col-md-2"> 
       <label for="continent" class="control-label">Continente</label> 
      </div> 
      <div style="" class="col-md-10"> 
       <input class="form-control" autocomplete="off" placeholder="Continente donde se encuentra" id="update-continent" name="continent" value="" type="text"> 
      </div> 
     </div> 
     <div style="" class="form-group col-md-12"> 
      <div style="" class="col-md-2"> 
       <label for="capital" class="control-label">Capital</label> 
      </div> 
      <div style="" class="col-md-10"> 
       <input class="form-control" autocomplete="off" placeholder="Ciudad capital" id="update-capital" name="capital" value="" type="text"> 
      </div> 
     </div> 
     <div style="" class="form-group col-md-12"> 
      <div style="" class="col-md-2"> 
       <label for="language" class="control-label">Lengua</label> 
      </div> 
      <div style="" class="col-md-10"> 
       <input class="form-control" autocomplete="off" placeholder="Lengua oficial" id="update-language" name="language" value="" type="text"> 
      </div> 
     </div> 
     <div style="" class="form-group col-md-12"> 
      <div style="" class="col-md-2"> 
       <label for="population" class="control-label">Habitantes</label> 
      </div> 
      <div style="" class="col-md-10"> 
       <input class="form-control" autocomplete="off" placeholder="Número total de habitantes" id="update-population" name="population" value="0" type="text"> 
      </div> 
     </div> 
     <div style="" class="form-group col-md-12"> 
      <div style="" class="col-md-2"> 
       <label for="currency" class="control-label">Moneda</label> 
      </div> 
      <div style="" class="col-md-10"> 
       <input class="form-control" autocomplete="off" placeholder="Moneda que se usa" id="update-currency" name="currency" value="" type="text"> 
      </div> 
     </div> 
     <div style="" class="form-group col-md-12"> 
      <span class="glyphicon glyphicon-floppy-disk btn btn-success"></span> 
      <span class="glyphicon glyphicon-ban-circle btn btn-primary"></span> 
      <input name="update-id" value="1" type="hidden"> 
     </div> 
    </div> 
</td></tr> 

     </tbody> 
    </table> 

JS

$(document).on('click', '#slidedown', function(event) { 
     var row = $('.table > tbody').find('tr'); 
     row.find('div.row').hide().slideDown('400'); 
    }); 

CSS

.just-padding { 
    padding: 15px; 
} 

.list-group.list-group-root { 
    padding: 0; 
    overflow: hidden; 
} 

.list-group.list-group-root .list-group { 
    margin-bottom: 0; 
} 

.list-group.list-group-root .list-group-item { 
    border-radius: 0; 
    border-width: 1px 0 0 0; 
} 

.list-group.list-group-root > .list-group-item:first-child { 
    border-top-width: 0; 
} 

.list-group.list-group-root > .list-group > .list-group-item { 
    padding-left: 30px; 
} 

.list-group.list-group-root > .list-group > .list-group > .list-group-item { 
    padding-left: 45px; 
} 

.list-group-item .glyphicon { 
    margin-right: 5px; 
} 

Answer 1

Sie könnten es tun, indem bestimmte Klasse zu Ihrem ersten Untermenü Links hinzufügen, Schleife durch alle Hauptmenüs/Links und dann auf das Symbol zum letzten Glied in Untermenü hinzufügen, die bestimmte Klasse enthält.

Etwas wie folgt aus:

$(function() { 
    $('div[id^="item-"]').each(function() { 
    $(this).find('.submenu2').last().append('<span id="slidedown" class="glyphicon glyphicon-plus pull-right"></span>'); 
    }); 
    $('.list-group-item').on('click', function() { 
    $('.glyphicon-chevron-right', this).toggleClass('glyphicon-chevron-down'); 
    }); 
}); 

Voll Code hier https://jsfiddle.net/ann7tctp/95/

Answer 2

starten .. Ich habe CSS geändert for fun ..

 $(function() { 

     $('.list-group-item').on('click', function() { 
     $('.glyphiconRight', this) 
      .toggleClass('glyphicon-chevron-right') 
      .toggleClass('glyphicon-chevron-down'); 
     }); 

     $(".list-group-item:last-child") 
     .css({ color:"red", fontSize:"80%" }) 
     .append('<span id="slidedown" class="glyphicon glyphicon-plus pull-right"></span>'); 

    });