javascript - 根据自定义类折叠嵌套的 Accordion 组

Question

我正在使用 Twitter Bootstrap 2.3.2 和 Asp.net MVC。

我在选项卡 Pane 上有一组嵌套 Accordion ，在其他选项卡 Pane 上有其他 Accordion 。

外部 Accordion 在一个 Accordion 组中，内部 Accordion 在另一个组中，嵌套在每个外部 Accordion 中。

颜色是使用自定义类的 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;
}

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

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

我有以下 javascript，需要修改以选择不同级别的 Accordion 。外部的“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>

上述 Accordion 集的 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');
});