我正在构建一个 progressively-enhanced , Bootstrap ed 网络应用程序具有 task-centric help在每一页上。帮助区域 div (id="help_area"
) 以隐藏状态加载;通常,当用户点击“帮助”按钮(a id="nav_help_button"
)时,主要内容 div 会从 span12 压缩到 span9,帮助区域显示为 span3。这很好用。
因为我想支持手机和平板电脑,所以我使用了 Bootstrap 的响应式脚手架。因此,如果您在窄视口(viewport)中查看页面,单击帮助按钮会“显示”页面底部隐藏的帮助区域‡。我正在尝试使用 jQuery 的 .slideToggle()
的回调方法来执行“跳转到”显示后的帮助区域,但没有跳转的运气(它没有错误;它只是没有将浏览器焦点移动到帮助区域)。
如何在页面底部显示一个 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);
}
});
我还设置了a JSFiddle that illustrates the problem . 复制
- 打开http://fiddle.jshell.net/jhfrench/HdCbu/7/show
- 然后调整浏览器窗口的大小,直到“PTO、AIT 生活、工作时间”等相互堆叠
- 单击右上角的按钮(带有三个白色水平条的按钮)以显示导航菜单
- 点击蓝色的“帮助”按钮执行显示/跳转到。
‡ 作为最右侧的 div,它左侧的所有内容都堆叠在顶部,因此新“显示”的帮助区域通常位于页面可见部分的下方。
相关:
最佳答案
当我完全按照您所说的(步骤 1-4)为我的浏览器(即 Chrome 24)执行操作时,您的 JSFiddle 会跳转。您的浏览器是什么?
但也许这是你的问题。如果我导航到 http://fiddle.jshell.net/jhfrench/HdCbu/7/show/#help_area (注意附加的散列标签)并执行步骤 1-4,我的浏览器不会跳转。请注意,当您第一次导航到该 URL 时,没有可见的#help_area。因此,您导航到的 URL 指定了一个不可见的散列标签。也许浏览器对此有点困惑,只是让#help_area 哈希标签处于错误状态。从那时起,即使它变得可见,它也不允许滚动到它。推测,但希望对您有所帮助!
关于javascript - 如何在页面底部显示一个 div,然后跳转到它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14783283/