javascript - 打开后禁用 Bootstrap Accordion

Question

我有一个正在运行的多个 Bootstrap Accordion ，并且希望在单击后禁用。一个选项卡必须始终保持打开状态。

例如，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 链接演示: 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/