jQuery 将框移动到当前目标 anchor 位置附近

Question

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

我有一个 float 的“目录”框，其中包含指向页面上几个隐藏 anchor 元素的超链接:

<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 脚本来绑定(bind) TOC 链接上的点击，以便将 float 框移动到与目标 anchor 相邻的位置。然而，它的成功或失败。在 anchor 上单击两次即可将框移动到正确的位置。

这是我正在使用的 jQuery:

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

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

Answer 1

手动选择正确的 anchor :

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