Question

所以这里是显示mdl菜单的代码。他们单击编辑按钮，然后出现一个菜单。

<button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="edit-button"> edit</button>
<ul id="edit_menu"  class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="edit-button">
  <li>change</li>
  <li>do something else</li>
</ul>

不幸的是，当用户点击带有下拉列表的页面的后退按钮时，下拉列表不再有效。我似乎无法重新初始化MDL。如果我单击菜单中的链接然后点击后退按钮，下拉菜单将保持打开状态。有什么想法吗？

相关问题是turbolinks破坏了MDL的东西，但是这段代码修复了它。不幸的是，当用户点击后退按钮时，它无法修复下拉列表

document.addEventListener 'turbolinks:load', ->
  componentHandler.upgradeDom();

Answer 1

这是解决问题的解决方法。它仅发生在1个特定页面上，因此我在URL中找到了一个唯一的字符串，然后覆盖了后退按钮以进行turbolinks访问。

window.addEventListener "popstate", (e)->
  if  (e.target.location.pathname.indexOf('customize_board')  != -1 )
    Turbolinks.visit( e.target.location)

我希望至少可以帮助某人，这样他们的页面就不会被打破。

Answer 2

我遇到了同样的问题。显然，只有在使用后退按钮（而不是前进按钮）时才会发生这种情况。我的解决方法是添加一个包含以下内容的javascript文件

document.addEventListener "turbolinks:load", ->
  componentHandler.upgradeDom()

@addEventListener "popstate", (e)->
  Turbolinks.visit(e.target.location)

Answer 3

这实际上解决了我的问题

<meta name="turbolinks-cache-control" content="no-cache">

当用户在使用Turbolinks时单击后退按钮时，MDL菜单不起作用

3 个答案: