我在Rails应用程序中使用jQuery来创建一个下拉菜单。一开始我以为是链轮的问题。我的nav.html.erb文件中的代码是:
<nav>
<%= link_to '#', class: 'toggle' do %>
<i class="fa fa-bars"></i>
<span>Menu</span>
<% end %>
<ul class = "menu-items">
<li>
<%= link_to root_path do %>
<span>Home</span>
<% end %>
</li>
<li>
<%= link_to about_path do %>
<span>About</span>
<% end %>
</li>
<li>
<%= link_to projects_path do %>
<span>Projects</span>
<% end %>
</li>
<li>
<%= link_to blogs_path do %>
<span>Blog</span>
<% end %>
</li>
<li>
<%= link_to contact_path do %>
<span>Contact</span>
<% end %>
</li>
</ul>
</nav>
我的nav.js文件中的代码是:
$(document).ready(function() {
var $switch = $('a.toggle'),
$menu = $('nav ul.menu-items'),
$icon = $('nav a.toggle i');
$switch.on('click', function(e){
e.preventDefault();
$menu.toggle(function(){
$icon.toggleClass('fa-bars fa-times');
});
});
});
当我刷新页面时,我按菜单导航栏,它显示了下拉菜单。我可以点击其中一个菜单项,并将被重定向到该页面。在新页面上,我再次点击菜单栏,我得到它的默认行为,这只是添加了"#"的url。
我认为这与文件有关。准备功能。在页面刷新时,显示文档。ready函数运行,但不从页面重定向后,当我单击一个菜单项。
谢谢luissimo,我查找了您提到的页面更改问题,并在这里找到了解决方案。Rails 4:如何在turbo-links中使用$(document).ready(它把我引到铁轨上。http://guides.rubyonrails.org/working_with_javascript_in_rails.html how-turbolinks-works
$(document).on ('turbolinks:load', function() {
var $switch = $('a.toggle'),
$menu = $('nav ul.menu-items'),
$xburger = $('nav a.toggle i');
$switch.on('click', function(e){
e.preventDefault();
$menu.toggle(function(){
$xburger.toggleClass('fa-bars fa-times');
});
});
});
我的响应式导航栏现在工作正常。这是典型的RTFM。
这是因为每次点击链接时,turbollinks都会导致页面更改事件发生,因此它每次都会重新评估Javascript。这就是为什么它一开始工作,但当你换页时,它可能会失灵。这是最简单的解决方法。
<script>
$('.toggle').dropdown()
</script>
您还可以将data-turbolinks-eval=false
添加到application.html.erb <script>
标签中,以在单击链接后中断重新评估。
:
将<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
改为<%= javascript_include_tag 'application', 'data-turbolinks-eval' => false %>.