jqueryを使ってリストアイテムにブートストラップグリフコンをスライドさせるには？

Question

ブートストラップグリフアイコンとをそれぞれの親の最後の子の一番下までスライドさせる必要があります。これどうやってするの。 Click here JS Fiddle

例：

親が項目1を持っており、子供が項目1.1、項目1.2、項目1.3を持っています。親をクリックしたとき。私は各子供の下部にグリフのアイコンを表示する必要があります。

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'); 
    }); 

.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

あなたは、すべてのメインメニュー/リンクを介して、あなたの最初のサブメニューのリンクにループを特定のクラスを追加することによって、それを行うと、特定のクラスが含まれているサブメニューの最後のリンクにアイコンを追加することができます。このような

何か：

$(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'); 
    }); 
}); 

全コードここhttps://jsfiddle.net/ann7tctp/95/

Answer 2

CSSは..私は楽しみのためのCSSを変更している、これを試してみてください。..

 $(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>'); 

    });