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将是来自面板I的数据目标的值点击。

谢谢。

Answer 1

我不确定我明白你在尝试什么。您只需要定位#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

Answer 2

为什么不添加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>

如何将事件附加到Bootstrap折叠面板的选择中？

2 个答案: