【问题标题】:angularjs nested accordion close-others not workingangularjs嵌套手风琴关闭其他不工作
【发布时间】:2015-05-08 12:54:14
【问题描述】:

我有一个使用“accordion”和“accordion-group”标签的多级手风琴。我在父手风琴中使用close-others="false",在嵌套手风琴中使用close-others="true"

我看到的是父面板和子面板都允许同时打开多个组,而不是外部面板允许扩展多个组而内部面板只允许一个组的预期行为。

<accordion close-others="false">
  <!-- Outer Group #1 -->
  <accordion-group heading="Outer Group #1" ng-init="status.isOuterGroup1Open = true" 
       is-open="status.isOuterGroup1Open">
    <!-- Outer Content Here -->
  </accordion-group>

  <!-- Outer Group #2 -->
  <accordion-group heading="Outer Group #2" ng-init="status.isOuterGroup2Open = true" 
       is-open="status.isOuterGroup2Open">
    <accordian close-others="true">
      <!-- Inner Groups -->
      <accordion-group data-ng-repeat="outerItem in outerItems" 
           heading="{{outerItem.name}}">
        <div data-ng-repeat="innerItem in outerItem.children">
          <!-- Inner content here -->
          {{innerItem.name}}
        </div>
      </accordion-group>
    </accordian>
  </accordion-group>
</accordion>

有什么办法可以解决这个问题吗?

【问题讨论】:

    标签: angularjs twitter-bootstrap nested accordion


    【解决方案1】:

    在您的示例中,在“外部组#2”中,您有“手风琴”,它应该是“手风琴”。我认为这就是问题所在。这是已应用修复的代码:

    <accordion close-others="false">
      <!-- Outer Group #1 -->
      <accordion-group heading="Outer Group #1" ng-init="status.isOuterGroup1Open = true" 
           is-open="status.isOuterGroup1Open">
        <!-- Outer Content Here -->
      </accordion-group>
    
      <!-- Outer Group #2 -->
      <accordion-group heading="Outer Group #2" ng-init="status.isOuterGroup2Open = true" 
           is-open="status.isOuterGroup2Open">
        <accordian close-others="true">
          <!-- Inner Groups -->
          <accordion-group data-ng-repeat="outerItem in outerItems" 
               heading="{{outerItem.name}}">
            <div data-ng-repeat="innerItem in outerItem.children">
              <!-- Inner content here -->
              {{innerItem.name}}
            </div>
          </accordion-group>
        </accordian>
      </accordion-group>
    </accordion>
    

    如果更改不能解决问题,请您发布一个 plunker 吗?

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-10-26
      • 2015-02-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多