如何将事件附加到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