Question

我的JS菜单有些问题。当页面加载菜单工作很好，并按预期。单击该选项，然后显示菜单项。

但是，一旦我点击其中一个菜单项并导航到另一个页面，菜单就会停止工作！单击图标时，菜单不再出现。该页面就在那里。当我在chrome中尝试调试时，它不再“命中”代码。

我注意到如果我刷新该页面，菜单会按预期再次运行：/

我的JS代码如下，我不知道会出现这种问题吗？

我为此创建了一支笔 - http://codepen.io/alr3id/pen/bwdKxL

function MyMenus(jQuery) {
  $(".p-menu-icon").on("click", function(event) {
     var e = $(this).next(".p-menu");
     e.hasClass("p-menu_open") || $(document).trigger("click"),
     $(".p-modal-bg").toggleClass("p-modal-bg_active"),
     e.toggleClass("p-menu_open"),
     event.stopPropagation()
  });

  // Removes the menu open class.
  $(document).on("click", function(t) {
     var e = $(t.target)
       , i = 1 === e.closest("p-menu").length;
     i || ($(".p-menu.p-menu_open").removeClass("p-menu_open"),
     $(".p-modal-bg").removeClass("p-modal-bg_active"))
  });
}

// Load
$(document).ready(MyMenus);

以下是菜单的HTML

<nav class="p">
  <div class="p-modal-bg"></div>

  <div class="p-property">
    <a class="p-property-name" href="/">
      Logo Here
    </a>
  </div>

  <div class="p-user">
    <a class="p-menu-icon">
      <div class="icon icon-navigator-toggle"></div>
    </a>

    <div class="p-menu p-menu_navigator">
      <a class="p-menu-item p-menu-item_dashboard" href="/">Dashboard</a>
      <a class="p-menu-item p-menu-item_orders" href="/orders">My orders</a>
      <a class="p-menu-item p-menu-item_back-bar" href="/products">Products</a>
    </div>

    <a class="p-menu-icon p-menu-icon_account">
      <div class="p-user-avatar_container">
        <img alt="Example user" class="gravatar" src="{image here}">
      </div>
    </a>

    <div class="p-menu p-menu_account">
      <div class="p-menu-item_account-details">
        <div class="p-user-avatar_container">
          <img alt="Example user" class="gravatar" src="https://secure.gravatar.com/avatar/{image here}">
        </div>
        <div class="p-account-details-name">
          Example User
        </div>
        <div class="p-account-details-email">example@example.com</div>
      </div>
      <a class="p-menu-item p-menu-item_settings" href="account">Account settings</a>
      <a class="p-menu-item p-menu-item_messages" href="#">Messages</a>
      <a class="p-menu-item p-menu-item_logout" href="#">Sign out</a>

    </div>
  </div>
</nav>

Answer 1

嗯，这是我甚至没有考虑过的事情，事实证明这个问题归咎于Rails和Turbolinks！

由于Turbolinks加载页面的方式，它会搞砸

$(document).ready

要解决此问题，您需要使用...

$(document).on "turbolinks:load"

http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks

Answer 2

您是否导入了此页面中使用的JS文件（卡住的新页面）？尝试在另一个文件上添加代码或将您的js代码移动到另一个js文件并将其导入该页面。

Answer 3

由于它适用于新加载的页面，因此代码本身不应该成为问题。想到的是班级变化。打开浏览器的检查程序，检查是否有任何类名更改可以在失去监听器时解决。

同时尝试在每个函数中添加一些console.log()，这样您就可以确定这两个事件都不会被逐个触发。

导航到其他页面时，JS菜单停止工作

3 个答案: