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>

我想把它放在＆＃34;关于我们＆＃34;页。它在JSFiddle中运行良好，但在我的Rails应用程序中，我看到了这种行为：

加载不同的页面（不是关于我们），然后导航到＆＃34;关于我们＆＃34; page：collapse工作正常。

刷新＆＃34;关于我们＆＃34;页面：崩溃不起作用。

我认为这与Turbolinks有关，但我尝试的任何工作都没有。

Answer 1

它最终受到this＆＃34;平滑滚动＆＃34;引起的点击事件的干扰。脚本。

我通过匹配＆＃34;崩溃＆＃34;：

来修复它

   $('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 Collapse在刷新后不起作用

1 个答案: