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



	     </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>



	     </div>
</div>