Gọi sự kiện trên bảng Bootstrap mở rộng

Question

Tôi đang làm việc trên luồng mà chúng tôi đang sử dụng accordion theo kiểu Bootstrap (KHÔNG phải là giao diện người dùng jQuery). Yêu cầu là gọi một dịch vụ khi người dùng mở rộng accordion. Đây là HTML:

<div class="accordion-dashboard"> 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default"> 
      <div class="panel-heading row-white" data-toggle="collapse" data-parent="#accordion" href="#runtimeValue">     
       <table> 
        <tr> 
         <td><span class="badge blue">A</span></td> 
         <td><strong>Aenean ultricies est lorem,id feugiat velit euismod ut.Nullam inia.Prasent vel nu Sed ante mauris, eu lacus..</strong></td> 
         <td><i class="icon8 icon-paperclip"></i></td> 
         <td><span class="time">5 mins</span></td> 
        </tr>      
       </table>       
      </div> 
      <div id="runtimeValue" class="panel-collapse collapse "> 
       <div class="panel-body"> 

        <div class="row"> 
         <div class="col-lg-9 col-lg-offset-1"> 
          <table> 
           <tr> 
            <td class="text-muted">By</td> 
            <td><img width="24px" src="images/company-logo.png"> Company Admin</td> 
           </tr> 
           <tr> 
            <td class="text-muted">On</td> 
            <td class="text-muted">Friday- 7 Aug 2014, 9.00PM</td> 
           </tr> 
           <tr> 
            <td><i class="icon8 icon-paperclip"></i></td> 
            <td>dummyfile.pdf</td> 
           </tr> 
           <tr> 
            <td colspan="2"> 
             <h5>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</h5> 
             <p>Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p> 
            </td> 
           </tr> 
          </table> 
         </div> 
         <div class="col-lg-1 pull-right"> 
          <span data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn-close icon8"></span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>  
</div> 

HREF thuộc tính và correspoding id thuộc tính sẽ được quyết định tại thời gian chạy và tôi nhận thức được mô hình của họ. Một cách tiếp cận có thể được ràng buộc một sự kiện trên nhấp chuột của accordion, nhưng tôi muốn có nó như là một phương sách cuối cùng.

Có cách nào khác để tôi có thể gọi dịch vụ khi người dùng nhấp và mở rộng accordion không?

Answer 1

Theo Bootstrap source (được thừa nhận là phiên bản mới nhất, 3.3.0), sẽ có sự kiện shown.bs.collapse được phát ra khi quá trình chuyển đổi hoàn tất. Bạn có thể móc vào đó.

Answer 2

Bạn có thể kiểm tra điều này cho: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-accordion.php. Điều này sẽ giúp chắc chắn.

show.bs.collapse 

cháy Sự kiện này ngay lập tức khi các phương pháp chương trình ví dụ được gọi.

Answer 3

Bạn có thể sử dụng: -

$('#accordion').on('show.bs.collapse', function() { 
     //call a service here 
});