Javascript jQuery下拉菜单第二次不工作

我正在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>

当我刷新页面时，我按下菜单导航栏，它会显示下拉菜单。我可以单击其中一个菜单项，并将重定向到该页面。在新页面上，我再次单击菜单栏，得到它的默认行为，它只是在url中添加了“#”

---

我认为这与document.ready函数有关。在页面刷新时，document.ready函数会运行，但在单击菜单项时从页面重定向后不会运行

这是因为Turbolinks在每次单击链接时都会导致page:change事件发生，因此每次都会重新评估Javascript。这就是为什么它一开始是有效的，但当你改变页面时，它可能会失效。这是最简单的解决方法

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

$（'.toggle'）。下拉列表（）

您还可以将

data turbolinks eval=false

添加到application.html.erb

标记中，以在单击链接后中断重新评估

像这样：

---

将

true%>

更改为

false%>。

这是因为Turbolinks会在每次单击链接时导致页面：更改事件发生，因此每次都会重新评估Javascript。这就是为什么它一开始是有效的，但当你改变页面时，它可能会失效。这是最简单的解决方法

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

$（'.toggle'）。下拉列表（）

您还可以将

data turbolinks eval=false

添加到application.html.erb

标记中，以在单击链接后中断重新评估

像这样：

---

将

true%>

更改为

false%>。

谢谢luissimo，我查看了页面：您提到的更改问题，并在这里找到了解决方案。 它引导我找到了rails指南：

我的快速响应导航栏现在工作正常。

---

这是RTFM的一个经典案例。

谢谢luissimo，我查阅了您提到的页面：更改问题，并在这里找到了解决方案。 它引导我找到了rails指南：

我的快速响应导航栏现在工作正常。

---

这是RTFM的一个典型例子。

尝试

$（function（）{

而不是

$（document）。ready（function（）{

）.jQuery 3不赞成这种语法，因为有时它有奇怪的行为。只是尝试了一下。同样的行为。尝试

$（function（）{

而不是

$（document）。ready（function（））{

.jQuery 3不推荐使用该语法，因为它有时会有奇怪的行为。只是尝试了一下。相同的行为。我在哪里添加$（'.toggle'）.dropdown（）行。在nav.js或application.html.erb文件中？将其放在正文末尾的application.html.erb中。我在哪里添加$（'.toggle'）.dropdown（））在nav.js或application.html.erb文件中？将其放入正文末尾的application.html.erb中

$(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');
    });

  });
});