Rails: Bootstrap 刷新后折叠不起作用

Question

我有一个简单的 Bootstrap 崩溃（正如在 this fiddle 中看到的那样）：

<h3>
    <a data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        OUR NAME</a>
</h3>
<div class="collapse" id="collapseExample">
    <p>
        Stuff about our name.
    <p>
</div>
<h3>
    <a data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        THE BOTTOM LINE BASICS</a>
</h3>
<div class="collapse" id="collapseTwo">
    <p>
    More words!
    </p>
</div>

我想把它放在 "About Us" 页面中。它在 JSFiddle 中运行良好，但在我的 Rails 应用程序中，我看到了这种行为：

加载不同的页面（不是关于我们），然后导航到 "About Us" 页面：折叠正常。

刷新"About Us"页面：折叠不起作用。

我认为这与 Turbolinks 有关，但我尝试的没有任何效果。

Answer 1

最终被this"smooth scrolling"脚本干扰点击事件

我通过匹配"collapse"修复了它：

   $('a[href*=#]:not([href*=#collapse])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html,body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });

Rails: Bootstrap 刷新后折叠不起作用

Rails: Bootstrap Collapse doesn't work after refresh

jquery

ruby-on-rails

twitter-bootstrap

turbolinks