覆盖后退按钮 HTML5 History API 时导航菜单不起作用答案

【问题标题】：Navigation menu dont work while overriding back button HTML 5 History API覆盖后退按钮 HTML5 History API 时导航菜单不起作用
【发布时间】：2013-09-08 03:49:00
【问题描述】：

我是历史 API 的新手。

在 chrome 中加载页面时导航菜单停止工作，在 Firefox 中它第一次工作但随后导航菜单再次停止工作。但是当我评论这个函数时，History API 不起作用。其他一切正常。没有 JS 或 Ajax 错误。

这是导致问题的函数：

 $(window).bind('popstate', function() {
    $.ajax({url:location.pathname,success: function(data){
      $('#ttl').html(data);
    }});
  });

在这里查看：http://ddvsdakor.com/test/services/logo-designing-and-branding.w

【问题讨论】：

你是什么意思：“不起作用”？
该功能没有明显的问题。您的导航是否在 JS 上运行，并且 AJAX 请求可能失败并导致页面上的其余 JS 崩溃？
我使用引导程序。我有下拉菜单。当我点击它时，它不显示菜单。
没有 JS 或 ajax 错误。它工作得很好。

标签： html5-history

【解决方案1】：

你的函数可能有一个额外的大括号。使用非弃用的语法对其进行了重新设计。

$(window).on('popstate', function(){
    $.ajax({ url: location.pathname })
        .done(function(data){ $('#ttl').html(data); });
});

【讨论】：

对不起先生，它没有解决我的问题。
在这里查看：ddvsdakor.com/test/services/logo-designing-and-branding.w
看起来只是缺少 CSS 来激活悬停时的下拉菜单。
不，先生，当我不包含上述功能时，它可以工作。没有 CSS 问题。

【解决方案2】：

我使用以下语法，但我不使用 history.js。我编写了自己的路由引擎来避免这些问题。

window.addEventListener("popstate", function (e) {
        $.ajax({
                url: location.href,
                success: function(content) {
                    $('body>#content').css({ opacity: 0 });
                    $('body>#content').html(content);
                    $('body>#content').animate({ opacity: 1 }, 300, 'swing');
                },
                cache: false
        });
        return false;
    });

我在topic 中解释了我使用 HTML 5 历史 API 的方式

【讨论】：

我会在测试您的功能后通知您。