我正在构建一个逐步增强的、引导式的Web 应用程序，它在每个页面上都提供以任务为中心的帮助。帮助区 div( id="help_area") 以隐藏状态加载；一般当用户点击“帮助”按钮a id="nav_help_button"（这很好用。
因为我想支持手机和平板，所以我使用的是 Bootstrap 的响应式脚手架。因此，如果您在狭窄的视口上查看页面，单击帮助按钮“显示”页面底部的隐藏帮助区域‡。我正在尝试使用 jQuery 的.slideToggle()回调方法来执行 JavaScript ( window.location.hash = "help_area";)，该 JavaScript () 在显示后“跳转到”帮助区域，但在跳转时没有运气（它不会出错；它只是不会移动浏览器专注于帮助区域）。
如何在页面底部显示一个 div，然后跳转到它？我还使用了 preventDefault ，因此浏览器在目标显示之前不会尝试跳转到内部链接。这可能是冲突吗？
这是相关的 ECMA 脚本：
$('#nav_help_button').click(function(event) {
"use strict"; //let's avoid tom-foolery in this function
event.preventDefault(); //don't let a tag try to jump us to #help_area before we reveal it
//adjust spans of main block and help area, set aria-hidden attribute on help block to help screen-readers
if ( $('#help_area').attr('aria-hidden')==='true' ) {
$('#content_container.span12').switchClass('span12', 'span9', 300);
$('#help_area').delay(300).slideToggle(300, function() { window.location.hash = "help_area"; }).attr('aria-hidden', 'false');
}
else {
$('#help_area').slideToggle(300).attr('aria-hidden', 'true');
$('#content_container.span9').delay(300).switchClass('span9', 'span12', 300);
}
});
我还设置了一个说明问题的 JSFiddle。复制
- 打开http://fiddle.jshell.net/jhfrench/HdCbu/7/show
- 然后调整该浏览器窗口的大小，直到“PTO、AIT Life、Hours Worked”等堆叠在一起
- 单击右上角的按钮（带有三个白色水平条的按钮）以显示导航菜单
- 单击蓝色的“帮助”按钮以执行显示/跳转。
‡ 作为最右侧的 div，它左侧的所有内容都堆叠在顶部，因此新“显示”的帮助区域通常位于页面可见部分的下方。
有关的：