如何实现 twitter bootstrap 手风琴? [英] How to implement twitter bootstrap accordion?

查看：31
本文介绍了如何实现 twitter bootstrap 手风琴?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试实现 twitter bootstrap 折叠插件 (http://twitter.github.io/bootstrap/2.3.2/javascript.html#collapse)，我似乎无法让它工作.认为我的开发环境有问题，我设置了一个 JSfiddle，但我仍然遇到同样的问题.这是jsfiddle:

http://jsfiddle.net/qdqrT/1/

这是直接从引导程序示例中复制的 HTML.

<div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">可折叠组项目 #1</a>
<div id="collapseOne" class="accordion-body 折叠在"><div class="accordion-inner">卡通动漫头像 qq头像导航...

<div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">可折叠组项目 #2</a>

<div id="collapseTwo" class="accordion-body collapse"><div class="accordion-inner">卡通动漫头像 qq头像导航...

CSS 和 javscript 直接取自 bootstrap 自定义页面，只有折叠 CSS 和 JS，以及 trasition JS(这是折叠插件的依赖项).

有人知道为什么会坏吗?

解决方案

我搞定了.我认为您可能没有包含所有必需的资源.

我最终包含了来自 BootstrapCDN

的 Bootstrap CSS 和 JS 的托管版本

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

这是工作版本:http://jsfiddle.net/qdqrT/3/

I'm trying to implement the twitter bootstrap collapse plugin (http://twitter.github.io/bootstrap/2.3.2/javascript.html#collapse) and I can't seem to get it working. Thinking it was something wrong with my development environment, I set up a JSfiddle and I'm still getting the same issues. Here's the jsfiddle:

http://jsfiddle.net/qdqrT/1/

Here is the HTML which was copied directly from the bootstrap example.

<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 collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </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">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>

The CSS and javscript were taken directly from the bootstrap customize page, with only the collapse CSS and JS, and the trasition JS (which is a dependency for the collapse plugin).

Anyone know why this is broken?

解决方案

I got it working. I think you might not be including all the required resources.

I ended up including a hosted version of bootstrap CSS and JS from BootstrapCDN

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

Here is the working version: http://jsfiddle.net/qdqrT/3/

这篇关于如何实现 twitter bootstrap 手风琴?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆