4

这是我在 heroku 上的应用程序的链接：http: //glacial-temple-5892.herokuapp.com/

它有一个包含 4 个链接的下拉列表，所有链接都指向主页 url。

如果您先单击“下拉菜单”，则会打开下拉菜单并显示 4 个链接。单击一个链接时，它将进入同一页面（带有路由'/'的主页），然后单击下拉菜单现在不起作用。但是，当我们在地址栏上刷新或按回车时，它就可以工作了。

有什么解决办法？

应用程序.html.erb

<!DOCTYPE html>
<html>
<head>
    <title>Assets test</title>
<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
    <a class="navbar-brand" href="#">Hello </a>
    <ul class='nav navbar-nav'>
        <li><a >link</a></li>
        <li><a >link</a></li>
        <li class='dropdown'>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href='/'>link 1</a></li>
                    <li><a href='/'>link 2</a></li>
                    <li><a href='/'>link 3</a></li>
                    <li><a href='/'>link 4</a></li>
                </ul>
        </li>
        </ul>
</div>
</nav>
    <p class='notice'><%= notice %></p>
    <p class='alert'><%= alert %></p>
<%= yield %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
</body>
</html>

应用程序/资产/javascripts/application.js

// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives)        for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//=require dropdown
//= require_tree .

应用程序/资产/样式表/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 *=require bootstrap
 */

我将 bootstrap.css 放在 vendor/stylesheets 我将 dropdown.js 放在 vendor/javascripts/ 目录中

4

1 回答 1

3

检查此主题：由于 turbolinks 不触发 Document.ready 事件，同样的问题。

于 2013-09-23T12:02:45.427 回答