jQuery下拉菜单第二次无效

时间:2016-09-09 21:58:00

标签: javascript jquery html css ruby-on-rails

我在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函数运行但在单击菜单项后从页面重定向后不会运行。

2 个答案:

答案 0 :(得分:0)

这是因为Turbolinks会导致页面:每次点击链接时都会发生更改事件,因此每次都会重新评估Javascript。这就是为什么它最初起作用,但是当你改变页面时它可能会失效。这是最简单的解决方法。

 <script>
   $('.toggle').dropdown()
 </script>

您还可以将data-turbolinks-eval=false添加到a​​pplication.html.erb <script>标记,以便在点击链接后中断重新评估。

喜欢这样:

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>更改为<%= javascript_include_tag 'application', 'data-turbolinks-eval' => false %>.

答案 1 :(得分:0)

谢谢luissimo,我抬头看了一下页面:改变你提到的问题并在这里找到解决方案。 Rails 4: how to use $(document).ready() with turbo-links 它引导我到导轨指南: 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的经典案例。