[英]jQuery dropdown menu not working second time
我在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');
});
});
});
当我刷新页面时,我按下菜单导航栏,它会显示下拉菜单。 我可以点击其中一个菜单项,然后重定向到该页面。 在新页面上,我再次单击菜单栏,我得到了它的默认行为,只是在网址上添加了“#”。
我认为它与document.ready函数有关。 在页面刷新时,document.ready函数运行但在单击菜单项后从页面重定向后不会运行。
这是因为Turbolinks会导致页面:每次单击链接时都会发生更改事件,因此每次都会重新评估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 %>.
谢谢luissimo,我抬头看了一下页面:改变你提到的问题并在这里找到解决方案。 Rails 4:如何使用带有turbo-links的$(document).ready()它引导我访问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的经典案例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.