Aufruf eines Ereignisses im Bootstrap-Panel Erweitern

Question

Ich arbeite an einem Flow, bei dem wir bootstrap-artiges Akkordeon verwenden (NICHT jQuery UI Akkordeon). Die Anforderung besteht darin, einen Dienst anzurufen, wenn der Benutzer das Akkordeon erweitert. Hier ist der 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 Attribut und die correspoding id Attribute zur Laufzeit entschieden werden, und ich bin mir bewusst, das Muster von ihnen. Eine Herangehensweise könnte ein Ereignis mit einem Klick auf das Akkordeon binden, aber ich möchte es als letzten Ausweg haben.

Gibt es eine andere Möglichkeit, einen Dienst aufzurufen, wenn der Benutzer das Akkordeon anklickt und erweitert?

Answer 1

Nach der Bootstrap source (freilich für die aktuellste Version, 3.3.0), sollte ein shown.bs.collapse Ereignis ausgegeben werden, sobald der Übergang abgeschlossen ist. Sie können darin einhaken.

Answer 2

Sie können dies überprüfen für: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-accordion.php. Dies wird sicherlich helfen.

show.bs.collapse 

Dieses Ereignis wird sofort ausgelöst, wenn die show-Instanzmethode aufgerufen wird

Answer 3

können Sie verwenden: -

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