Bootstrap 3可折叠面板,没有id或数据
Bootstrap 3 collapsible panel without id or data
我需要在不使用ID或数据属性的情况下处理面板折叠行为。理想情况下,通过在父div上设置一个可以折叠其内容的"可折叠"类,点击标题就会触发折叠
这是我想写的目标HTML,用于自动处理的崩溃行为
<div class="panel-group collapse-all-but-one">
<div class="panel panel-primary panel-collapsible>
<div class="panel-heading">Click me to collapse</div>
<div class="panel-body">I will collaaaaaaapse</div>
</div>
<div class="panel panel-warning panel-collapsible">
<div class="panel-heading">Hey another one</div>
<div class="panel-body">I will close when the other one opens</div>
</div>
</div>
这是我的神奇代码(现成的东西确保了与rails/angularJS的兼容性)
var ready
ready = function(){
$(".panel-collapsable")
.children(".panel-heading")
.click(function(){
var group = $(this).parent().parent()
if (group.hasClass("panel-group one-at-a-time")){
group.children(".panel").children(".panel-body")
.collapse('hide')
}
$(this)
.next('.panel-body')
.collapse('toggle')
})
}
$(document).ready(ready);
$(document).on('page:load', ready);
请记住添加一些引导程序类,如.collate.in或.collated,以初始化正确的行为,否则第一次单击将不会起任何作用。
<div class="panel-body collapse in">I am expanded on page load</div>
...
<div class="panel-body collapse">I am collapsed on page load</div>
相关文章:
- 识别没有ID或特定属性的对象
- 将类添加到没有id的元素中
- 使用SeleniumWebdriver(带有Java)测试没有ID的视频
- Form获胜'没有ID主联系表格无法验证
- Stripe API:没有ID为X的令牌(Stripe.cocharges.create)
- 使用jQuery捕获没有ID的字段上的更改事件
- Chrome扩展插件:runtime.last运行tabs.get/tabs.remove时出错:没有id为0的选项卡
- url中没有id的内部链接
- 将图像附加到没有 id 或值的 td 元素
- 如何选择并单击没有 id 属性的按钮
- 选中没有ID的单选按钮,只有名称、类型和值
- 如何在没有id的文本字段中输入值
- 用另一个没有ID的类移除/替换类-仅限Javascript
- 删除没有'我没有id或类
- VBA IE单击/显示没有id或标记而不是超链接的javascript
- 确定两个HTML元素在没有ID的情况下是否不同
- 如何使用selenium选择没有id的下拉菜单
- 加载后修改页面上所有没有id的图像(src)
- 有没有一种通用方法可以通过Javascript访问没有id的DOM元素
- HTML:从没有 ID 的输入中获取值