基于自定义类折叠嵌套的手风琴组

Question

我正在使用带有 Asp.net MVC 的 Twitter Bootstrap 2.3.2。

我在选项卡窗格上有一组嵌套的手风琴，在其他选项卡窗格上有其他手风琴。

外部手风琴在手风琴组中，内部手风琴在另一个组中，嵌套在每个外部手风琴内。

使用自定义类的 CSS 规则应用颜色。

.accordion-toggle.outcome {
    background-color:#d9edf7;
}

.accordion-toggle.outcome.collapsed {
    background-color:White;
}

.accordion-toggle.achievement {
    background-color:#dff0d8;
}

.accordion-toggle.achievement.collapsed {
    background-color:White;
}

我需要根据选择的新手风琴强制完全折叠打开的手风琴。如果选择了内部手风琴，那么我只希望关闭其他内部手风琴。如果选择了外部手风琴，我希望关闭内部和外部手风琴。

关闭意味着将'collapsed'类分配给accordion-toggle，这决定了accordion-heading的高亮颜色。

我有以下 javascript 需要修改以选择不同级别的手风琴。外部类 'outcome' 和内部类 'achievement' 目前是两者之间的唯一区别。

我尝试了各种 if/else 组合，但似乎都不起作用。我已经包含了我在更改选项卡时使用的 javascript，因为这可能会改变我需要处理的方式。

<script type="text/javascript">

    //need to collapse all when tab changes
    $('a[data-toggle="tab"]').on('shown', function (e) {            
        $('.accordion').find('.accordion-toggle').addClass('collapsed');
        $('.accordion').find('.accordion-body').removeClass('in');
        $('.accordion').find('.accordion-body').height('0px');                    
        }
         );

    //collapse accordion depending on class
    // from https://github.com/twbs/bootstrap/issues/7213#issuecomment-18547519
    $('.collapse').on('hide', function () {

        //do something to select internal or external accordion here...

                $('[href="#' + $(this).attr('id') + '"]').addClass('collapsed');

        });

</script>

上述手风琴集的 HTML 如下：

<div class="accordion" id="interventions">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle outcome collapsed" data-toggle="collapse" data-parent="#interventions" href="#collapse12">
        <label for="">Test Finance</label>
      </a>
    </div>
    <div id="collapse12" class="accordion-body collapse">
      <div class="accordion" id="intervention0">
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle achievement" data-toggle="collapse" data-parent="#intervention0" href="#collapse012">
              <label for="">Achievement Finance 3</label>
            </a>
          </div>
          <div id="collapse012" class="accordion-body collapse">
            <div class="accordion-inner">
              <div class="accordion-group">Test group</div>
            </div>
          </div>
        </div>
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle achievement" data-toggle="collapse" data-parent="#intervention0" href="#collapse111">
              <label for="">Achievement Finance 2</label>
            </a>
          </div>
          <div id="collapse111" class="accordion-body collapse">
            <div class="accordion-inner">
              <div class="accordion-group">Test group</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle outcome collapsed" data-toggle="collapse" data-parent="#interventions" href="#collapse10">
        <label for="">Huge Money</label>
      </a>
    </div>
    <div id="collapse10" class="accordion-body collapse">
      <div class="accordion" id="intervention1">
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle achievement" data-toggle="collapse" data-parent="#intervention1" href="#collapse010">
              <label for="">Achievement Finance 1</label>
            </a>
          </div>
          <div id="collapse010" class="accordion-body collapse">
            <div class="accordion-inner">
              <div class="accordion-group">Test group</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我设法使用以下 javascript 解决了这个问题。自定义类仅由 CSS 用于在 accordion-toggle 打开或折叠时为其应用正确的颜色。

css修改为：

.accordion-toggle.outcome {
    background-color:#d9edf7;
}

.accordion-toggle.achievement {
    background-color:#dff0d8;
}

.accordion-toggle.collapsed {
    background-color:transparent;
}

感谢 Ammu 帮助this related question。

Javascript

//function to collapse all accordions when changing tabs
function tabCollapse() {
    $('.accordion').find('.accordion-toggle').addClass('collapsed');        
    $('.accordion').find('.accordion-body').removeClass('in');
    $('.accordion').find('.accordion-body').height('0px');
}

//function to fully collapse accordion on same page
function pageCollapse(inner) {
    $('#' + inner).find('.accordion-toggle').addClass('collapsed');        
    $('#' + inner).find('.accordion-body').removeClass('in');
    $('#' + inner).find('.accordion-body').height('0px');
}

//collapse all when tab changes
$('a[data-toggle="tab"]').on('shown', function () {
    tabCollapse();
});

//collapse inner accordion on same page
$('.accordion').on('hidden', function (e) {        
    var inner = e.target.id;
    pageCollapse(inner);
});

//on hide remove colour
$('.accordion').on('hide', function (e) {
    var selected = e.target.id;
    $('#' + selected).siblings().find('.accordion-toggle').addClass('collapsed');
});