Question

我有这个简单的手风琴代码。单击组标题后，内容将按预期显示。但是当我点击另一个组标题时，之前打开的内容不会隐藏。

我不希望同时显示多个内容，我找不到我做错的事。

这是我的手风琴实现，我没有向您展示内容，因为它是动态生成的，并且会引起混淆，而不是其他任何内容：

<div id="accordion" class="panel-group">
  // accordion members are generated with a xslt template, in response
  // of a window service
   <div class="panel panel-default">
      <div class="panel-heading">
         <div class="panel-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse{id}">
         // This section is generated dynamically 
            </a>
         </div>
      </div>
      <div id="collapse{id}" class="panel-collapse collapse">
         <div class="panel-body">
      // the main content is dynamically generated too.
         </div>
      </div>
   </div>
</div>

Answer 1

<div id="accordion" class="panel-group">
// accordion members are generated with a xslt template, in response
// of a window service
 <div class="panel panel-default">
  <div class="panel-heading">
     <div class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseone">
           // This section is generated dynamically 
        </a>
     </div>
  </div>
  <div id="collapseone" class="panel-collapse collapse">
     <div class="panel-body">
        // the main content is dynamically generated too.
     </div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
     <div class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo">
     // This section is generated dynamically 
        </a>
     </div>
  </div>
  <div id="collapsetwo" class="panel-collapse collapse">
     <div class="panel-body">
  // the main content is dynamically generated too.
     </div>
  </div>

jsfiddle.net/dJDHd/966/

在这个例子中它有两个组并且正常工作。一个条件是每个人都有唯一的身份。

Answer 2

嗨我有同样的问题。我不确定这是否是最佳解决方案，但它对我帮助很大。

我创建了一个函数，一直在检查.panel标题的锚子。我称他们为#header {{$ i}}。所以我检查锚是否有类.collapsed。如果它有类.collapsed然后我使用bootstrap函数：.collapse（＆＃34; hide＆＃34;）;

＆＃13;

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="heading{{$i}}">
                <h4 class="panel-title">
                  <a id='header{{$i}}' role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$i}}" aria-expanded="false" aria-controls="collapse{{$i}}">
//Content
                    <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
                  </a>
                </h4>
              </div>
              <div id="collapse{{$i}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{$i}}">
                <div class="panel-body">
//Content
                </div>
              </div>
            </div>

＆＃13;

HTML：

＆＃13;

#include <stdio.h>
#include <MagickWand/MagickWand.h>

int main(int argc, char const *argv[]) {

  MagickWand * wand;
  wand  = NewMagickWand();
  MagickReadImage(wand, "input.png");

  PixelWand * PW3, * PW4;

  PW3 = NewPixelWand();
  PW4 = NewPixelWand();

  PixelSetColor(PW3,"transparent");
  PixelSetColor(PW4,"#008080");
  MagickOpaquePaintImage(wand, PW3, PW4, 20.0*65535.0/100.0, MagickTrue);

  MagickWriteImage(wand, "single_color.png");
}

＆＃13;

这是我创建的最终代码。当然，您需要为代码稍微修改一下。

我真的希望它可以帮到你。

Bootstrap手风琴不会崩溃

我不希望同时显示多个内容，我找不到我做错的事。

2 个答案: