Bootstrap collapsible on show

Question

Я использую меню аккордеона Bootstrap http://twitter.github.io/bootstrap/javascript.html#collapse, и я хочу, чтобы он имел знак «+» перед текстом, когда складной не сваливается, а маленький - знак перед текстом, когда складной рухнет. Я слушаю следующих слушателей:

$('.collapse').on('show', function(e){ 
     $('.collapsed-status').innerHTML('- '); 
    }); 
    $('.collapse').on('hide', function(e){ 
     $('.collapsed-status').innerHTML('+ '); 
    }); 

jQuery также включен, поэтому не должно быть проблем с этими selecotrs. Мой складной вид выглядит так:

<div class="accordion-group produkty"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#produkty" href="#collapse1"><span class="collapsed-status">+ </span>Test</a> 
         <ul id="collapse1" class="collapse"> 
         <li>›› Test</li> 
         <li>›› Test</li> 
         <li>›› Test</li> 
         <li>›› Test</li> 
         </ul> 
       </div> 

но он не работает. Я попытался исправить это, но я не могу заставить его работать. Спасибо вперед за вашу помощь

Answer 1

Вы можете переключить класс элемента со следующим кодом:

$('.accordion').collapse(); 

$('.accordion').on('shown hidden', function(e){ 
    $(e.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-plus icon-minus'); 
}); 

В коде выше я тумблер между отображением значка плюс и минус значок, который вам может использоваться с вашего использования бутстрапа.

Вам просто нужно добавить значок перед каждым заголовком следующим образом:

<div class="accordion-heading"> 
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
     <i class="icon-minus"></i> Heading 1 
    </a> 
</div> 

В результате получается следующее:

Вот в jsFiddle, так что вы можете увидеть живую демонстрацию : http://jsfiddle.net/s8dAd/4/

Последний вопрос

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Смежные вопросы

• Нет связанных вопросов^_^