rails资产 - 在链接点击时无法正常工作,但在刷新或按下时工作在地址栏中输入。提供了Heroku链接

时间:2013-09-23 10:28:37

标签: ruby-on-rails

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

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

如果您先点击“下拉列表”,则会打开下拉菜单并显示4个链接。单击一个链接时,它将到达同一页面(带有路径'/'的主页),然后单击下拉列表现在无效。但是,当我们刷新或按地址栏上的输入时,它可以工作。

解决方案是什么?

application.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>

应用程序/资产/ Javascript角/ 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
 */

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

1 个答案:

答案 0 :(得分:2)

检查此topic:由于不会触发Document.ready事件的turbolinks导致同样的问题。