我使用以下示例将 Accordion 菜单添加到我的网站:
<div class="bs-example">
<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">1. Menu number one</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>Menu number one text</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. Menu number two</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Menu number two</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. Menu number three</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>Menu number three</p>
</div>
</div>
</div>
</div>
</div>
你可以看直播here
你知道我怎样才能使整个按钮可点击吗?目前只有标题就可以了。
先感谢您
最佳答案
创建点击事件.panel-heading
并在事件中检查 .panel-heading
第二个祖先是 <a class="" href="#colapseXXXXX" data-parent="#accordion" data-toggle="collapse"></a>
.例如检查 href 中的值。然后如果是真的触发点击<a>
.
试试这个代码:
$('.panel-heading').on('click', function () {
var a = $(this).childen('.panel-title').children('a');
var ahref = a.prop('href');
if (ahref.indexOf('#collapse') > -1)
{
a.trigger("click");
}
});
工作解决方案:
$(document).ready(function(){
$('.panel-heading').on('click', function () {
var a = $(this).find('a');
var ahref = a.prop('href');
if (ahref.indexOf('#collapse') > -1)
{
$('.panel-collapse').removeClass('in');
$(this).next('div').addClass('in');
}
});
$(".panel-heading a").on('click', function(event) {
$(this).closest('.panel-heading').trigger('click');
return false;
});
});;
触发点击会导致点击事件冒泡返回到 .panel-heading 和 .panel-heading 再次触发点击导致无限循环。如果我尝试阻止默认(),我也会阻止默认 Bootstrap 行为,所以 click 没有改变任何东西。上面的解决方案是我认为唯一的一个。
关于twitter-bootstrap - Bootstrap Accordion : how to make entire button clickable?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31694227/