我在 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 中添加“#”。
我认为这与 document.ready 函数有关。页面刷新时, document.ready 函数会运行,但当我单击菜单项时从页面重定向后不会运行。
最佳答案
谢谢luissimo,我查找了页面:更改您提到的问题并在这里找到了解决方案。 Rails 4: how to use $(document).ready() with turbo-links 它引导我找到 rails : 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的经典案例。
关于javascript - jQuery 下拉菜单第二次不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39420265/