Question

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

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

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

Accordions

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

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

1 个答案:

的Javascript