3

在此页面上 > http://canvas.clickbump.com/example/

我有一个浮动的“目录”框，其中包含针对页面上几个隐藏锚元素的超链接：

<a id="anchor1">This is anchor 1</a>

和

<a id="anchor2">This is anchor 2</a>

盒子的标记：

<details class="cb-toc" open="open">
    <summary>Table of Contents</summary>
    <ol>
        <li><a href="#top">GoTo Top</a></li>
        <li><a href="#anchor1">GoTo Anchor 1</a></li>
        <li><a href="#anchor2">GoTo Anchor 2</a></li>
    </ol>
</details>

我正在尝试使用下面的 jQuery 脚本来绑定对 TOC 链接的点击，以便它将浮动框移动到与目标锚点相邻的位置。然而，它的成功或失败。在锚点上单击两次以将框移动到正确的位置。

这是我正在使用的 jQuery：

jQuery('.cb-toc a').on('click',foo);
function foo(){
    jQuery('a:target').after(jQuery('.cb-toc'));
}

有什么想法可以让它在每次第一次点击时将框移动到正确的位置？

4

2 回答 2

2

当您的点击处理程序运行时，新目标尚未设置，之后会发生。这就是为什么 TOC 总是将自己定位在前一个目标旁边（两次单击同一链接后工作正常）。

您可以使用setTimeout()延迟执行 TOC 放置，或者监听onhashchange浏览器设置新目标时触发的事件。或者您可以简单地放弃该:target方法并自己找到正确的锚点，例如：

function foo() {
     //hash will be something like #top
     var hash = this.hash;

     //wait, it looks like an ID selector :)
     jQuery(hash).after(jQuery('.cb-toc'));
}

jsFiddle 演示

可能需要完成一些工作，因此该hash变量在每个浏览器 ( #whatever) 中始终保持正确的值，因此此示例不是生产就绪代码，只是一个说明。

于 2013-01-25T01:19:16.177 回答
2

手动选择正确的锚点：

jQuery('.cb-toc a').click(function(e){
    var str = jQuery(this).attr('href');
    jQuery(str).after(jQuery('.cb-toc'));
}
于 2013-01-25T01:28:10.577 回答