[英]jQuery dropdown menu not working second time
I'm using jQuery in a Rails app to create a dropdown menu. 我在Rails应用程序中使用jQuery来创建下拉菜单。 At first I thought it was a sprockets issue.
起初我认为这是一个链轮问题。 The code in my nav.html.erb file is:
我的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>
The code in my nav.js file is: 我的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');
});
});
});
When I refresh the page, I press menu nav bar and it reveals the drop down menu. 当我刷新页面时,我按下菜单导航栏,它会显示下拉菜单。 I can click on one of the menu items and will be redirected to the page.
我可以点击其中一个菜单项,然后重定向到该页面。 On the new page I click the menu bar again and I get it's default behaviour, which just adds '#' to the url.
在新页面上,我再次单击菜单栏,我得到了它的默认行为,只是在网址上添加了“#”。
I think it has something to do with the document.ready function. 我认为它与document.ready函数有关。 On page refresh, the document.ready function runs but doesn't after being redirected from a page when I click a menu item.
在页面刷新时,document.ready函数运行但在单击菜单项后从页面重定向后不会运行。
It's because Turbolinks causes a page:change event to occur each time a link is clicked and because of that it reevaluates the Javascript every time. 这是因为Turbolinks会导致页面:每次单击链接时都会发生更改事件,因此每次都会重新评估Javascript。 That's why it works at first but when you change pages it might dysfunction.
这就是为什么它最初工作,但当你改变页面时,它可能会失效。 This is the easiest work around for it.
这是最简单的解决方法。
<script>
$('.toggle').dropdown()
</script>
You can also add data-turbolinks-eval=false
to the application.html.erb <script>
tag to interrupt the reevaluation after clicking on links. 您还可以将
data-turbolinks-eval=false
到application.html.erb <script>
标记,以在单击链接后中断重新评估。
like this: 像这样:
Change <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
to <%= javascript_include_tag 'application', 'data-turbolinks-eval' => false %>.
将
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
更改为<%= javascript_include_tag 'application', 'data-turbolinks-eval' => false %>.
Thanks luissimo, I looked up the page:change problem you mentioned and found a solution on here. 谢谢luissimo,我抬头看了一下页面:改变你提到的问题并在这里找到解决方案。 Rails 4: how to use $(document).ready() with turbo-links It lead me to the rails guides: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#how-turbolinks-works
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');
});
});
});
My responsive navigation bar is working fine now. 我的响应式导航栏现在运行正常。 It was a classic case of RTFM.
这是RTFM的经典案例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.