如何在没有数据标记的情况下将bootstrap 3 collapse用于手风琴
How do I use bootstrap 3 collapse for an accordion without data- markup?
我试图在没有所有data-
属性标记的情况下为手风琴使用引导折叠。我看到它在创建时切换,但我希望面板标题中的两个锚可以控制崩溃。我知道如何使用jQuery手动完成这项工作,但我认为只需调用.collapse()
就可以完成。
JS-
$('.collapse').collapse();
//$('.t-title,.t-toggle').collapse(); // also tried this with no luck
HTML
<!-- notices start -->
<div class="row spaced" id="notice">
<div class="col">
<div class="panel-group" id="accordion">
<!-- start update -->
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a class="t-title" href="#notice-1">title</a>
<a class="t-toggle" href="#notice-1">toggle</a>
</h4>
</div>
<div id="notice-1" class="panel-collapse collapse in">
<div class="panel-body"><p>content</p><p>content</p><p>content</p></div>
</div>
</div>
<!-- / end update -->
<!-- start update -->
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a class="t-title" href="#notice-2">title</a>
<a class="t-toggle" href="#notice-2">toggle</a>
</h4>
</div>
<div id="notice-2" class="panel-collapse collapse">
<div class="panel-body"><p>content</p><p>content</p><p>content</p></div>
</div>
</div>
<!-- / end update -->
<!-- start update -->
<div class="panel panel-danger">
<div class="panel-heading">
<h4 class="panel-title">
<a class="t-title" href="#notice-3">title</a>
<a class="t-toggle" href="#notice-3">toggle</a>
</h4>
</div>
<div id="notice-3" class="panel-collapse collapse">
<div class="panel-body"><p>content</p><p>content</p><p>content</p></div>
</div>
</div>
<!-- / end update -->
</div>
</div>
</div>
不能将data-
标记放在一边,因为collapse()
函数用于初始化Collapse组件,它不是事件触发器。
如果您不想手动设置每个data-toggle
属性,您至少可以使用以下行:
$('#accordion').find('.t-title, .t-toggle').attr('data-toggle', 'collapse');
Bootply
相关文章:
- 如何在未直接触发的情况下停止事件
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 在不使用jquery的情况下查找页面中的所有锚点并附加函数
- 在不打开聊天屏幕的情况下制作Zopim-ding代理
- 在不阻止默认行为的情况下检测IE10中的缩放
- 如何在不传递此信息的情况下查找被调用的元素
- 如何在不刷新页面的情况下更新显示框
- 有没有一种方法可以在控制台关闭的情况下让console.log()在IE中记录消息
- JavaScript-在手机上不工作的情况下,在外部单击时隐藏元素
- 在我的情况下,如何进行http请求
- 在不知道深度或父属性的情况下从对象中删除属性
- 如何在没有数据标记的情况下将bootstrap 3 collapse用于手风琴
- 有没有可能在不占据整个风格的情况下使用Bootstrap
- Jquery,在本地.js文件的情况下,Bootstrap子菜单不显示
- Twitter Bootstrap 3中的图像默认情况下没有响应
- angular.bootstrap()-在不需要ng应用程序或ng控制器的情况下引导angular应用程序
- Bootstrap在这种情况下可用吗?
- 如何在不破坏页面现有样式的情况下将Bootstrap包含在页面中?
- Angular routing & Bootstrap - 在不更改页面内容的情况下显示模式对话框
- 如何在我的情况下设置Angular/Bootstrap UI