推特引导手风琴答案

【问题标题】：twitter bootstrap accordion推特引导手风琴
【发布时间】：2012-10-14 02:00:09
【问题描述】：

我正在尝试在我的网站上制作一个类似于 here 的手风琴。但是，每当我单击要折叠的位置时，它不会下降，而是将我链接到 my_url#collapseOne （或两个或三个，具体取决于我单击哪个）。而且，当我加载网页时，菜单 1 已被删除（不可取），而其他两个看起来正确。

关于如何正确实现手风琴效果的任何想法？

【问题讨论】：

向我们展示您的标记，如果没有您的标记，我们无法告知您哪里出错了
您可以按照doc 上的说明开始，不要忘记检查是否包含 jQuery 和插件文件
我打结的标记是我粘贴到我的代码中的标记。虽然我的代码相当长，但我不确定其他部分是否相关。我想我最困惑为什么它在单击时链接到 url +'#collapseNumber' 并将页面向下滚动到该位置。我认为它会这样做的唯一原因是因为在代码的前面，我有一个顶部菜单，您可以在其中单击它并向下链接到哈希标记的 hrefs。 Slightly updated markup，不确定是否有帮助。

【解决方案1】：

所以你需要做两件事

文档准备就绪后，您需要初始化手风琴。这意味着您将遍历所有手风琴容器并将它们初始化为关闭。
您会将点击事件处理程序附加到打开/关闭手风琴的链接。为了防止浏览器跟踪这些链接，您应该从这些事件处理程序中返回 false，这会阻止事件进一步冒泡。这将阻止浏览器跟踪该链接。

【讨论】：

你不需要这样做，因为插件会这样做。您确实需要初始化手风琴，但您可以激活所有手风琴，甚至使用标记 data-toggle="collapse" 这样您就不需要任何 JavaScript：doc。
我的假设是 OP 正在尝试制作定制手风琴，因为它们确实可以工作。包含的示例也完成了所要求的一切。也许看看一些源代码会很高兴。
对不起，我对网页设计了解不多。我把我发布的标记放在我的代码中，结果和描述的一样。我不确定标记中还有什么有用的。我还发现它重定向到附加了“#collapseNumber”的网址很奇怪。在我的代码前面，我在顶部有一个菜单，它链接到页面后面的位置，这些位置是哈希标记的 href。

【解决方案2】：

http://twitter.github.com/bootstrap/javascript.html#collapse。如果您自定义了引导安装，请确保您拥有所需的文件。如果您将 twitter-bootstrap-rails gem 与资产管道一起使用，您应该很好地将代码放入并查看它的工作。

【讨论】：

我确实有所需的文件。 This 是当我拖放写在您链接到我的网站上的 html 时的样子。同样单击它们会导致页面链接到它们。即，它转到 url + '#collapseNumber'。