按下后退按钮时，自动折叠移动设备上的下拉导航栏菜单

Posted 2021-05-06

我在移动视图中有一个带折叠导航栏的Bootstrap站点。它工作正常，除了当下拉导航栏菜单打开并且用户按下他的移动设备上的后退键时，它仍然保留，尽管浏览器确实返回到最后一页。那么当按下后退按钮时，如何折叠下拉导航栏菜单（如果打开）？我尝试了以下但它没有做任何事情：

$(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    var opened = $('.navbar-collapse').hasClass('collapse in');
    if ( opened === true ) { $('.navbar-collapse').collapse('hide'); }
  }
});

请注意，我已经在我的页面上包含了最新的完整版JQuery Mobile（1.4.5）。我甚至尝试用简单的if()替换第二个alert()块内的代码，但即使这样也行不通，所以看起来if()块甚至没有触发。不确定它是否正在捕捉事件。还有另一种方法来实现这一目标吗？

注意：为了确保克莱顿的评论不会误导具有潜在答案的访问者，这个问题不是重复的，原因有两个：

1. 我的问题中描述的问题是Chrome android而不是Safari ios，以及
2. 他声称与之相关的问题是关于导航问题，其中按下后退按钮不会将用户带回到上一页，而我的问题是关于下拉子菜单，当后退按钮是时，它不会折叠按下。我的页面导航工作正常。

答案

我遇到了类似的问题：

当有人打开导航栏时，单击一个链接，然后在该页面上按下后退按钮，它会返回一个带有导航栏下拉列表的页面。

这是由turbolinks引起的。

与原始问题一样，上述代码无效，因为turbolinks使用javascript更改页面上的内容的方式。解决方案是在下拉列表中单击链接时创建.on('click', function(){到removeClass('in')。

现在一切都运转良好。

另一答案

我正在使用Bootstrap 4。

这就是我在我的应用程序中解决这个问题的方法。侧边栏的ID是侧边栏，列表项中的锚标记具有类.nav-link。必须删除班级开放。希望这能给出一些想法。

$(document).ready(function() {
    $(".nav-link").click(function(event) {
        $("#sidebar").removeClass("open");
    });
});