同一页上的两个Bootstrap手风琴 [英] Two Bootstrap accordions on same page

问题描述

我正在使用Boostrap框架，但是手风琴有问题。当我尝试添加2条Bootstrap手风琴时 http://twitter.github.com/bootstrap/ javascript.html＃collapse 在同一页面上，因此只有一个可以正常工作。有人会在同一页面上添加2个这些手风琴吗？

在您的时间里谢谢。

解决方案

您的第二个手风琴无法正常工作，因为您要引用 data-parent 和手风琴对象ID（例如 id = collapseTwo ），一旦您区分了两个手风琴并在第二个手风琴上设置了正确的 data-parent 属性，一切正常。 / p>

使用唯一ID和正确的数据父代引用固定标记

 < h1>第一手风琴< / h1> 
< div class = accordion id = accordion2> 
< div class = accordion-group> 
< div class = accordion-heading> 
< a class = accordion-toggle data-toggle = collapse data-parent =＃accordion2 href =＃collapseOne> 
可折叠组项目＃1 $​​ b $ b< / a> 
< / div> 
< div id = collapseOne class =折叠中的手风琴琴身 style = height：auto;> 
< div class = accordion-inner> 
 Anim pariatur cliche reprehenderit，enim eiusmod高生活度Accusamus Terry Richardson广告和鱿鱼。 3狼月亮官方定义，非cupidatat滑板dolor早午餐。食品卡车藜麦nesciunt laborum eiusmod。早午餐3狼月亮时期，圣阿里夸在上面放了一只鸟鱿鱼单一产地的咖啡nulla假设n。 Nihil anim keffiyeh helvetica，精酿啤酒劳斯·韦斯·安德森·克雷泽·内塞普·萨皮恩特都很有名。广告纯素食者屠夫副lomo。绑腿occaecat精酿啤酒从农场到餐桌，您可能还没有听说过原始牛仔布美学合成纤维，因为它们是可持续的VHS。 
< / div> 
< / div> 
< / div> 
< div class = accordion-group> 
< div class = accordion-heading> 
< a class = accordion-toggle data-toggle = collapse data-parent =＃accordion2 href =＃collapseTwo> 
可折叠组项目＃2 
< / a> 
< / div> 
< div id = collapseTwo class =手风琴正文折叠 style = height：0px;> 
< div class = accordion-inner> 
 Anim pariatur cliche reprehenderit，enim eiusmod高生活度Accusamus Terry Richardson广告和鱿鱼。 3狼月亮官方定义，非cupidatat滑板dolor早午餐。食品卡车藜麦nesciunt laborum eiusmod。早午餐3狼月亮时期，圣阿里夸在上面放了一只鸟鱿鱼单一产地的咖啡nulla假设n。 Nihil anim keffiyeh helvetica，精酿啤酒劳斯·韦斯·安德森·克雷泽·内塞普·萨皮恩特都很有名。广告纯素食者屠夫副lomo。绑腿occaecat精酿啤酒从农场到餐桌，您可能还没有听说过原始牛仔布美学合成纤维，因为它们是可持续的VHS。 
< / div> 
< / div> 
< / div> 
< div class = accordion-group> 
< div class = accordion-heading> 
< a class = accordion-toggle data-toggle = collapse data-parent =＃accordion2 href =＃collapseThree> 
可折叠组项目＃3 
< / a> 
< / div> 
< div id = collapseThree class =手风琴正文折叠 style = height：0px;> 
< div class = accordion-inner> 
 Anim pariatur cliche reprehenderit，enim eiusmod高生活度Accusamus Terry Richardson广告和鱿鱼。 3狼月亮官方定义，非cupidatat滑板dolor早午餐。食品卡车藜麦nesciunt laborum eiusmod。早午餐3狼月亮时期，圣阿里夸在上面放了一只鸟鱿鱼单一产地的咖啡nulla假设n。 Nihil anim keffiyeh helvetica，精酿啤酒劳斯·韦斯·安德森·克雷泽·内塞普·萨皮恩特都很有名。广告纯素食者屠夫副lomo。绑腿occaecat精酿啤酒从农场到餐桌，您可能还没有听说过原始牛仔布美学合成纤维，因为它们是可持续的VHS。 
< / div> 
< / div> 
< / div> 
< / div> 
 
< hr> 
 
< h1>第二手风琴< / h1> 
< div class = accordion2 id = accordion3> 
< div class = accordion-group> 
< div class = accordion-heading> 
< a class = accordion-toggle data-toggle = collapse data-parent =＃accordion3 href =＃collapse4> 
可折叠组项目＃1 $​​ b $ b< / a> 
< / div> 
< div id = collapse4 class =折叠中的手风琴琴身 style = height：auto;> 
< div class = accordion-inner> 
 Anim pariatur cliche reprehenderit，enim eiusmod高生活度Accusamus Terry Richardson广告和鱿鱼。 3狼月亮官方定义，非cupidatat滑板dolor早午餐。食品卡车藜麦nesciunt laborum eiusmod。早午餐3狼月亮时期，圣阿里夸在上面放了一只鸟鱿鱼单一产地的咖啡nulla假设n。 Nihil anim keffiyeh helvetica，精酿啤酒劳斯·韦斯·安德森·克雷泽·内塞普·萨皮恩特都很有名。广告纯素食者屠夫副lomo。绑腿occaecat精酿啤酒从农场到餐桌，您可能还没有听说过原始牛仔布美学合成纤维，因为它们是可持续的VHS。 
< / div> 
< / div> 
< / div> 
< div class = accordion-group> 
< div class = accordion-heading> 
< a class = accordion-toggle data-toggle = collapse data-parent =＃accordion3 href =＃collapse5> 
可折叠组项目＃2 
< / a> 
< / div> 
< div id = collapse5 class =手风琴正文折叠 style = height：0px;> 
< div class = accordion-inner> 
 Anim pariatur cliche reprehenderit，enim eiusmod高生活度Accusamus Terry Richardson广告和鱿鱼。 3狼月亮官方定义，非cupidatat滑板dolor早午餐。食品卡车藜麦nesciunt laborum eiusmod。早午餐3狼月亮时期，圣阿里夸在上面放了一只鸟鱿鱼单一产地的咖啡nulla假设n。 Nihil anim keffiyeh helvetica，精酿啤酒劳斯·韦斯·安德森·克雷泽·内塞普·萨皮恩特都很有名。广告纯素食者屠夫副lomo。绑腿occaecat精酿啤酒从农场到餐桌，您可能还没有听说过原始牛仔布美学合成纤维，因为它们是可持续的VHS。 
< / div> 
< / div> 
< / div> 
< div class = accordion-group> 
< div class = accordion-heading> 
< a class = accordion-toggle data-toggle = collapse data-parent =＃accordion3 href =＃collapse6> 
可折叠组项目＃3 
< / a> 
< / div> 
< div id = collapse6 class =手风琴正文折叠 style = height：0px;> 
< div class = accordion-inner> 
 Anim pariatur cliche reprehenderit，enim eiusmod高生活度Accusamus Terry Richardson广告和鱿鱼。 3狼月亮官方定义，非cupidatat滑板dolor早午餐。食品卡车藜麦nesciunt laborum eiusmod。早午餐3狼月亮时期，圣阿里夸在上面放了一只鸟鱿鱼单一产地的咖啡nulla假设n。 Nihil anim keffiyeh helvetica，精酿啤酒劳斯·韦斯·安德森·克雷泽·内塞普·萨皮恩特都很有名。广告纯素食者屠夫副lomo。绑腿occaecat精酿啤酒从农场到餐桌，您可能还没有听说过原始牛仔布美学合成纤维，因为它们是可持续的VHS。 
< / div> 
< / div> 
< / div> 
< / div> 
  

演示： http://jsfiddle.net/STqCF/

I am using Boostrap framework, but I have problem with accordions. When I am trying to add 2 bootstrap accordions http://twitter.github.com/bootstrap/javascript.html#collapse on the same page so only one works fine. Does someone how to add 2 these accordions on the same page?

Thx for your time.

解决方案

Your second accordion is not working because you are referencing the first accordion on the data-parent and accordion object ids (e.g. id="collapseTwo"), once you differentiate both accordions and set the proper data-parent property on the second accordion everything works fine.

Fixed markup with unique ids and proper data-parent references

<h1>First Accordion</h1>
<div class="accordion" id="accordion2">
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapseOne" class="accordion-body in collapse" style="height: auto; ">
        <div class="accordion-inner">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </div>
      <div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">
        <div class="accordion-inner">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </div>
      <div id="collapseThree" class="accordion-body collapse" style="height: 0px; ">
        <div class="accordion-inner">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
</div>

<hr>

<h1>Second Accordion</h1>
<div class="accordion2" id="accordion3">
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse4">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapse4" class="accordion-body in collapse" style="height: auto; ">
        <div class="accordion-inner">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse5">
          Collapsible Group Item #2
        </a>
      </div>
      <div id="collapse5" class="accordion-body collapse" style="height: 0px; ">
        <div class="accordion-inner">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse6">
          Collapsible Group Item #3
        </a>
      </div>
      <div id="collapse6" class="accordion-body collapse" style="height: 0px; ">
        <div class="accordion-inner">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
</div>

Demo: http://jsfiddle.net/STqCF/

这篇关于同一页上的两个Bootstrap手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！