Почему Bootstrap 3 аккордеона JQuery не работает для меня

Question

Пожалуйста, помогите мне решить проблему, связанную с аккордеоном вверх и вниз glyphicon в начальном загрузке 3.here моего HTML код

<div class="panel panel-default"> 
          <div class="panel-heading"> 
           <h4 class="panel-title"> 
            <a data-toggle="collapse" class="accordion-toggle" data-parent="#accordian" href="#mens"> 
             <span class="glyphicon glyphicon-chevron-down pull-right"></span> 
             Dabur 
            </a> 
           </h4> 
          </div> 
          <div id="mens" class="panel-collapse collapse"> 
           <div class="panel-body"> 
            <ul> 
             <li><a href="#">Hair Oil</a></li> 
             <li><a href="#">Baby Care</a></li> 
             <li><a href="#">Oral Hygiene</a></li> 
             <li><a href="#">Shampoo & Conditioner</a></li> 
             <li><a href="#">Honey</a></li> 
             <li><a href="#">Candy-Chocolate</a></li> 
             <li><a href="#">Chyawanprash</a></li> 
             <li><a href="#">Balm</a></li> 
             <li><a href="#">Capsules</a></li> 
             <li><a href="#"> Syrup/Health Tonic</a></li> 
             <li><a href="#">Churan/Digestive Suppliments</a></li> 

            </ul> 
           </div> 
          </div> 
         </div> 

И Это мой Jquery код

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
$(document).on('click', '.accordion-toggle', function() {  
    $(".accordion-toggle").each(function() { 
     var iconSpan = $(this).find('.glyphicon'); 
     if ($(this).hasClass('collapsed')) { 
      $(iconSpan).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); 
     } else { 
      $(iconSpan).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up'); 
     } 
    }); 
}); 
}); 

</script> 

я старался имитировать проблему, но does't решить, пожалуйста, решить, если нашли какую-либо ошибку

Answer 1

Вы можете сделать прочь с JQuery в целом, делая это так:

Для этого HTML:

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" class="accordion-toggle collapsed" data-parent="#accordian" href="#mens"> 
       <!-- add both icons to the dom, we'll chow and hide them with CSS --> 
       <span class="glyphicon glyphicon-chevron-down pull-right"></span> 
       <span class="glyphicon glyphicon-chevron-up pull-right"></span> 
       Dabur 
      </a> 
     </h4> 
    </div> 
    <div id="mens" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      <ul> 
       <li><a href="#">Hair Oil</a></li> 
       <li><a href="#">Baby Care</a></li> 
       <li><a href="#">Oral Hygiene</a></li> 
       <li><a href="#">Shampoo & Conditioner</a></li> 
       <li><a href="#">Honey</a></li> 
       <li><a href="#">Candy-Chocolate</a></li> 
       <li><a href="#">Chyawanprash</a></li> 
       <li><a href="#">Balm</a></li> 
       <li><a href="#">Capsules</a></li> 
       <li><a href="#">Syrup/Health Tonic</a></li> 
       <li><a href="#">Churan/Digestive Suppliments</a></li> 

      </ul> 
     </div> 
    </div> 
</div> 

Этот CSS:

.accordion-toggle .glyphicon-chevron-down, 
.accordion-toggle.collapsed .glyphicon-chevron-up{ 
    display:none; 
} 
.accordion-toggle.collapsed .glyphicon-chevron-down{ 
    display:block; 
} 

See it in this demo