Question

我正在使用twitter Bootstrap进行扩展 - 崩溃效果，而且每一件事都有效，但是当我点击一些文件然后我的所有div与carousel类都在扩展时我有问题，有谁知道如何解决这个问题是代码示例：

<div class="description collapse-group">
   <!-- This div with class mehr-pfeil I am using as trigger for collapse. If user clicks on it, the content of collapse element should show.-->
   <div class="mehr-pfeil" onclick=".collapse('toggle');">
      <!-- But if user clicks on heading <a> then it shall go directly to article -->
      <a href="/?id=2500,1111142">
      <span>04.07.2014</span>
      <span class="orange">&nbsp;</span><span>Some content <span>
      </a>
      <p class="collapse">Some content</p>
   </div>
   <p class="collapse">Nicht das Erfinden neuer Themen, sondern das Umsetzen bestehender bzw. der in den Klausuren definierten.</p>
</div>

PS。这只是我的内容的一个例子，应该通过崩溃触发。想象一下你有不止一个。

更新：当我点击折叠元素时，也会出现问题。例如，如果一个元素被关闭则另一个元素打开，反之亦然。

所以我想知道如何使用js来解决这个问题：

我正在使用的点击事件：

onclick="$(\'#main-content\').find(\'.collapse\').collapse(\'toggle\');">'."\n";

Answer 1

如果您遵循示例here，您应该能够正确实现展开 - 折叠效果。

我有点不清楚你要问的是什么;你的解释对我来说不是很清楚，我有点不确定你的代码想要完成什么。但据我所知，问题的根源可能是您的代码中缺少id和href属性。

一个例子可能是这样的：

<div class="panel">
  <a data-toggle="collapse" href="#collapsableDiv">Click me!</a>
  <div id="collapsableDiv" class="panel-collapse collapse">
    <p>Nicht das Erfinden neuer...</p>
  </div>
</div>

我没有时间创建JSFiddle并检查我的工作，但这是一个应该适用于bootstrap崩溃的基本基础知识的示例。只要您的项目中有bootstrap.js，就不需要任何自定义JavaScript。

使用jQuery效果的IMO比Bootstrap更清晰，更容易;我目前正在开发一个使用Bootstrap崩溃但是动画随机停止工作的项目，所以我转而使用jQuery幻灯片效果。考虑一下，如果bootstrap给你带来太多麻烦。

如何通过twitter崩溃只触发一个元素

1 个答案: