Bootstrap3 摺疊插件的事件

摺疊插件的事件

Bootstrap還爲摺疊組件提供了一組事件，通過這些事件，可以監聽用戶的行爲及摺疊組件的狀態。這些事件及含義見表 4‑10。

表 4‑10 摺疊插件的事件及含義

事件	含義
show.bs.collapse	調用show方法時，立即觸發該事件
shown.bs.collapse	當可摺疊元素對用戶完全可見（會等待過渡效果執行結束）後，觸發該事件
hide.bs.collapse	調用hide方法時，立即觸發該事件
hidden.bs.collapse	當可摺疊元素對用戶完全不可見（而且過渡效果執行完畢）後，觸發該事件

例如，要在可摺疊元素對用戶完全可見時，將內容區的文本顏色改爲橙色，代碼可以這麼寫：

1. <script>
2. $('.collapse').collapse({
3.   parent: "#accordion2" 
4. });
5. $('.accordion-toggle').click(function(){
6.   $(this).parent().next().collapse('toggle');
7. });
8. $('.accordion-body').on('show', function(e){
9.   $(e.target).css({"color":"#f60"});
10. });
11. </script>

關於作者

歪脖先生，十五年以上軟件開發經驗，酷愛Web開發，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML寶典》、《揭祕CSS》、《Less簡明教程》、《JSON教程》、《Bootstrap2用戶指南》、《Bootstrap3實用教程》，並全部在 GitHub 上開源。