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

Answer 2

我不确定我是否理解您的尝试。你只需要定位#collapseabout。这既是 Bootstrap 可折叠元素，也是数据目标。然后您可以在显示处理程序中调用 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