jQuery可移动与当前目标锚点位置相邻的框

Question

在此页面上> 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脚本来绑定目录链接上的点击，以便它将浮动框移动到目标锚点附近的位置。然而，它的命中或未命中。在锚点上单击两次即可将长方体移动到适当的位置。

下面是我使用的jQuery：

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

你知道怎么做才能让它在每次第一次点击时将框移动到合适的位置吗？

Answer 1

手动选择正确的锚点：

jQuery('.cb-toc a').click(function(e){
    var str = jQuery(this).attr('href');
    jQuery(str).after(jQuery('.cb-toc'));
}

Answer 2

当你的点击处理程序运行时，新的目标还没有被设置，它将在之后发生。这就是为什么TOC总是将自己定位在前一个目标的旁边(在同一链接上单击两次后工作正常)。

您可以使用setTimeout()延迟目录放置的执行，也可以侦听在浏览器设置新目标时触发的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 Demo

可能需要做一些工作，所以在每个浏览器(#whatever)中，hash变量总是保存正确的值，所以这个示例并不是生产就绪的代码，只是一个示例。