引导3崩溃改变活动状态
Bootstrap 3 collapse change Active state
我在Bootstrap v3上有一个折叠面板,我想通过使用Javascript或jQuery应用一个新的类来改变活动面板的背景颜色。
这是我的Panel
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Panel Title Name
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<a href="#" class="list-group-item"></i>Link</a>
<a href="#" class="list-group-item"></i>Link</a>
<a href="#" class="list-group-item"></i>Link</a>
</div>
</div>
</div>
</div>
我想在。panel-heading打开时应用活动状态,我尝试了很多东西,但没有一个对我有效,我感谢你的帮助和提前感谢。
====================================== 更新 ==============================
我成功地应用了一个类:
$('#accordion > .panel').on('show.bs.collapse', function (e) {
$('#accordion').find('.panel-heading').addClass("active-panel");
});
但它的类应用到所有面板在我的页面,我怎么能修复Java选择器?
尝试使用$(this)
:Demo Fiddle
$('#accordion > .panel').on('show.bs.collapse', function (e) {
$(this).find('.panel-heading').addClass("active-panel");
});
相关文章:
- 在Angular 2中布线期间保持零部件处于活动状态
- 如何使bxslider仅在移动视图中处于活动状态
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 使用纯javascript而非jquery使所选选项卡处于活动状态并保持非活动状态
- 我如何为列出的选项卡元素编写一个Protractor测试,它会检查它是否's是否处于活动状态
- 返回上一页时,Javascript仍处于活动状态
- Angular+bootstrap ui,检查当前选项卡是否已处于活动状态
- 按钮处于活动状态,焦点无法在Mac FireFox上工作
- 禁用永久活动状态
- 单击我网站中的链接时打开新选项卡,保持当前选项卡处于活动状态
- 网页在等待 AJAX 响应时变为非活动状态
- 广告拦截处于活动状态,然后不要打开超链接到新标签
- 如何创建至少 1 个框处于活动状态的复选框列表
- 如何使按钮具有 :活动状态 1 秒
- JQuery UI 1.11 将选项卡设置为活动状态
- 如何获取链接以保持活动状态
- 限制 .live() 函数在 JavaScript 中变为活动状态的次数
- 如何在每次页面重新加载时更改渐变背景,同时保持光标位置元素处于活动状态
- 页面刷新后,所选选项卡处于非活动状态
- 引导3崩溃改变活动状态