我正在尝试对 Accordion 使用 Bootstrap 折叠,而不使用所有 data-
属性标记。我看到它在创建时切换,但我希望面板标题中的两个 anchor 来控制折叠。我知道如何使用 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
关于javascript - 如何在没有数据标记的情况下对 Accordion 使用 Bootstrap 3 Collapse?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20121982/