新手问题 bootstrap 中 bootstrap-collapse.js 如何设置制定的某个 collapse 处于显示状态,而其他的处于隐藏状态

naitnix · February 05, 2013 · Last by naitnix replied at February 05, 2013 · 13284 hits

如题,我想利用 bootstrap-collapse.js 来指定某个 collapse 处于默认显示状态,而其他的默认处于隐藏状态,我知道通过 html 的 .collapse 和.in 是可以设置的,但是我想通过 bootstrap-collapse.js 来设置,默认情况下,总是第一个处于显示状态,其他的处于隐藏状态,怎样才能制定某个 collapse 处于显示状态呢?

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle">
        国土问题
      </a>
    </div>
    <div id="collapse0" class="accordion-body collapse" style="height: 0px;">
      <div class="accordion-inner">
        前一段时间一个段子说,某国的网民在因国土问题与中国网民争吵时说,我要打到北京,中国的网民非常淡然地回应,就你那经济水平,交得起过路费吗?这两天新的段子说,李白要是活在今天的话,估计一大半以上他的诗根本写不出来,因为名山大川的门票他根本买不起。
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle">
        门票问题
      </a>
    </div>
    <div id="collapse1" class="accordion-body collapse" style="height: 0px;">
      <div class="accordion-inner">
        目前,中国半数5A级景区门票达到100元,黄山门票10年来由80元涨至230元。山东曲阜称,与同类景区相比收费较低,仅收150元,不涨票价就丢身价。曲阜的孔庙、孔府和孔林,年收入1.5亿元左右,全部上缴了地方财政,但景区维护成本从未公开。
      </div>
    </div><div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle">
        国土问题
      </a>
    </div>
    <div id="collapse0" class="accordion-body collapse" style="height: 0px;">
      <div class="accordion-inner">
        前一段时间一个段子说,某国的网民在因国土问题与中国网民争吵时说,我要打到北京,中国的网民非常淡然地回应,就你那经济水平,交得起过路费吗?这两天新的段子说,李白要是活在今天的话,估计一大半以上他的诗根本写不出来,因为名山大川的门票他根本买不起。
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle">
        门票问题
      </a>
    </div>
    <div id="collapse1" class="accordion-body collapse" style="height: 0px;">
      <div class="accordion-inner">
        目前,中国半数5A级景区门票达到100元,黄山门票10年来由80元涨至230元。山东曲阜称,与同类景区相比收费较低,仅收150元,不涨票价就丢身价。曲阜的孔庙、孔府和孔林,年收入1.5亿元左右,全部上缴了地方财政,但景区维护成本从未公开。
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle">
        超生罚款
      </a>
    </div>
    <div id="collapse2" class="accordion-body in" style="height: auto;">
      <div class="accordion-inner">
        学者杨支柱因生二胎被取消公职,并罚款24万余元。他称,计生罚款以前直接叫超生罚款,入世后改成“社会抚养费”。根据9省市超生罚款的平均数,全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政,而地方则分配混乱,部分罚款去向成谜。
      </div>
    </div>
  </div>
</div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle">
        超生罚款
      </a>
    </div>
    <div id="collapse2" class="accordion-body in" style="height: auto;">
      <div class="accordion-inner">
        学者杨支柱因生二胎被取消公职,并罚款24万余元。他称,计生罚款以前直接叫超生罚款,入世后改成“社会抚养费”。根据9省市超生罚款的平均数,全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政,而地方则分配混乱,部分罚款去向成谜。
      </div>
    </div>
  </div>
</div>

以上为 html 代码,一下为 js 代码,我正是想通过一下的 js 代码来制定特定的 collapse:

$(function () {
  $.each($('.accordion a.accordion-toggle'), function(i, link){
    $('#collapse' + i).collapse({
      toggle : true,
      parent : '#accordion2'
    });

    if(i == 0){
      $('#collapse' + i).collapse('hide');//指定第一个处于隐藏状态
    }

    if(i == 1){
      $('#collapse' + i).collapse('show');//指定第二个处于隐藏状态
    }


    $(link).on('click', function(){
        $('#collapse' + i).collapse('toggle');
      }
    );
  });  
})

但是我发现以下这两句不起作用,还是默认显示的第一个:

if(i == 0){
  $('#collapse' + i).collapse('hide');//指定第一个处于隐藏状态
}

if(i == 1){
  $('#collapse' + i).collapse('show');//指定第二个处于隐藏状态
}

不知道是否有人实现过,望指点

通过 rails 发出的 html 实现吧,css 有样式控制这个。

html 实现不是问题,只是我想通过 js 来实现更灵活的控制,这样的话,我就没必要在 html 中写一堆的属性了,而且类似与这种效果都是基于事件的,功能上来说,要实现手风琴效果及其他效果的时候应该在一个 click 事件中完成,所以还是希望通过 js 来实现

You need to Sign in before reply, if you don't have an account, please Sign up first.