Question

我在移动视图中有一个带折叠导航栏的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()块甚至没有触发。不确定它是否正在捕捉事件。还有另一种方法可以实现这个目标吗？

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

我的问题中描述的问题是在Chrome Android上，而不是Safari iOS和
他声称与之相关的问题是关于导航问题，其中按下后退按钮不会将用户带回到上一页，而我的问题是关于下拉子菜单，该菜单在没有折叠时按下后退按钮。我的页面导航工作正常。

Answer 1

我遇到了类似的问题：

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

这是由turbolinks引起的。

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

现在一切都运转良好。

Answer 2

List

	$('#menu1').on("click", function (e) {
		window.history.pushState('forward', null, './#dropdown');
    });
    $(window).on('popstate', function () {
    	$('#menu1').dropdown("toggle");
    });

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

2 个答案: