一直在使用 Zurb Foundation 4 构建的 Web 应用程序,我遇到了一些其他人似乎没有遇到的小麻烦。我正在使用可以完美运行的标准顶栏实现,就像这样......
<ul class="left">
<li><a href="/pageone" class="ajax_go">Page One</a></li>
<li class="divider"></li>
<li class="has-dropdown"><a href="#">More...</a>
<ul class="dropdown">
<li><a class="ajax_go" href="/pagetwo">Page Two</a></li>
</ul>
</li>
</ul>
我创建了一个 ajax_go 处理程序来使用这个函数通过 ajax 加载我的内容......
$(document).on("click", ".ajax_go", function(e){
e.preventDefault();
var page_name = $(this).attr('href');
$.ajax({
url: page_name + '?ajax=1',
success: function(result){
$('#content').html(result);
$(document).foundation('section','reflow');
}
});
if(page_name!=window.location){
window.history.pushState({path:page_name},'',page_name);
}
return false;
});
现在我对顶级链接没有任何问题,但我的功能在下拉项目上失败。单击“第一页”按预期工作,但单击“第二页”会退回到加载新页面的默认操作。我不知道要从foundation.topbar.js 中删除什么,但我认为一些javascript 正在影响下拉链接。
如果我以移动宽度加载页面,每次都会失败。