Question

我有一个多个bootstrap手风琴正在运行，并希望在点击后禁用。一个标签必须始终保持打开状态。

例如，Link1已经打开，因此应禁用link1。只有link2和link3应该是可点击的。我该怎么做到这一点？

以下是代码：

<div id="accordion">
  <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample1">
    Link 1
  </a>
  <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample2">
    Link 2
  </a>
  <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample3">
    Link 3
  </a>
  <div class="collapse in" id="collapseExample1">
    This is the description 1
  </div> 
  <div class="collapse" id="collapseExample2">
    This is the description 2
  </div> 
  <div class="collapse" id="collapseExample3">
    This is the description 3
  </div> 
</div>

使用Javascript：

$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});

JSFiddle Link演示： https://jsfiddle.net/DTcHh/19604/

Answer 1

这会给你这个结果。

$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});

$('a').on('click',function(){
  // enable all 
  $('a').each( function(){
     $(this).removeAttr('disabled')
  })
  // disable me
  $(this).attr('disabled', 'disabled')
})

jsFiddle：https://jsfiddle.net/DTcHh/19608/

Answer 2

只需从要禁用手风琴的元素中删除类collapse in即可。就像这里一样link1。

$('#accordion').on('show.bs.collapse', function () {
   $('#accordion .in').collapse('hide');
});
$(".collapse.in").removeClass('collapse in');

我希望这就是你想要的。请检查此fiddle。

<强>更新 Final Fiddle并提供适当的解决方案。

打开后禁用Bootstrap手风琴

2 个答案: