jQuery下拉菜单第二次不工作

jQuery dropdown menu not working second time

本文关键字：工作 第二次 下拉菜单 jQuery      更新时间：2023-09-26

我在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 %>.

相关文章：