如何將事件附加到Bootstrap摺疊面板的選擇？

Question

在以下代碼中，有一個沒有列表的Bootstrap可摺疊面板，因此它不會展開或收縮。我如何將活動附加到此面板的選擇上？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="panel-group"> 
 
      <div class="panel panel-default" id="leftsidemenu"> 
 

 

 
<div class="panel-heading" id="aboutcollapsepanel"> 
 
        <h4 class="panel-title"> 
 
         <a data-toggle="collapse" href="#collapseabout" data-target="tabsabout" >About</a> 
 
        </h4> 
 
       </div> 
 
       <div id="collapseabout" class="panel-collapse collapse"> 
 

 
       </div> 
 

 

 

 
\t  </div> 
 
</div>

我的非工作嘗試如下：

$("#aboutcollapsepanel").on('show.bs.collapse', function() { 
    alert("collapse panel activated"); 
}); 

$("#aboutcollapsepanel").on('hide.bs.collapse', function() { 
    alert("collapse panel deactivated"); 
}); 

我怎樣才能獲得面板的數據目標值，在這種情況下tabsabout，這是一個jQueryUI選項卡小部件。我的目標是獲取此id並將其傳遞給一個使其可見的javascript函數，並且該函數的簽名爲function performListItemAction(item)，其中item將是我單擊的面板中數據目標的值。

謝謝。

Answer 1

爲什麼不加入的onClick？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script> 
 
function performListItemAction(item) { 
 
alert(item); 
 
} 
 
</script> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="panel-group"> 
 
      <div class="panel panel-default" id="leftsidemenu"> 
 

 

 
<div class="panel-heading" id="aboutcollapsepanel"> 
 
        <h4 class="panel-title"> 
 
         <a data-toggle="collapse" href="#collapseabout" data-target="tabsabout" onClick="performListItemAction('tabsabout')">About</a> 
 
        </h4> 
 
       </div> 
 
       <div id="collapseabout" class="panel-collapse collapse"> 
 

 
       </div> 
 

 

 

 
\t  </div> 
 
</div>

Answer 2

我不知道我明白你在嘗試什麼。你只需要目標#collapseabout。這既是Bootstrap可摺疊元素，也是數據目標。然後你可以在show handler中調用performListItemAction（）。

<div class="panel-group"> 
    <div class="panel panel-default" id="leftsidemenu"> 
     <div class="panel-heading" id="aboutcollapsepanel" data-toggle="collapse" data-target="#collapseabout"> 
      <h4 class="panel-title"> 
       About 
      </h4> 
     </div> 
     <div id="collapseabout" class="panel-collapse collapse"> 
       about content here.. 
     </div> 
    </div> 
</div> 

http://www.codeply.com/go/IvWxFtgoJo