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

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

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

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

在自定义类上使用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;
}

我需要强制打开的手风琴完全折叠，这取决于选择了哪个新手风琴。如果选择了内部手风琴，则我只希望关闭其他内部手风琴。如果选择了外部手风琴，我希望关闭内部和外部手风琴

关闭意味着将“折叠”类指定给手风琴切换，它决定手风琴标题的高亮颜色

我有以下javascript需要修改以选择不同级别的手风琴。目前，外部的“结果”和内部的“成就”是两者之间唯一的区别

我尝试过多种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>

---

我使用以下javascript成功地解决了这个问题。自定义类仅由CSS用于在手风琴开关打开或折叠时为其应用正确的颜色

css修订为：

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

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

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

感谢安木的帮助

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');
});