我有一个容器中的链接与锚在另一个容器中隐藏默认情况下。当两个容器都显示时,链接工作没有问题,但是当“锚”容器隐藏时,链接不工作。
我想做的是:在点击链接时,显示相对容器并转到锚的行。
以下是我所做的,没有太大的成功(also as a Fiddle):
$(document).ready(function() {
$(".toggle > *").hide();
$(".toggle .header").show();
$(".toggle .header").click(function() {
$(this).parent().children().not(".header, .wy-table-responsive").toggle(400);
$(this).parent().children(".wy-table-responsive").children().toggle(400);
$(this).parent().children(".header").toggleClass("open");
$(this).parent().children(".wy-table-responsive").toggleClass("open");
});
// Add click event listeners to links with href pointing to anchors in hidden section
$("a[href^='#']").click(function(event) {
event.preventDefault(); // Prevent default behavior of link
var targetId = $(this).attr("href").substring(1); // Get the id of the target anchor
$(document.location.targetId).slideDown().prev().addClass('active');
});
});
.toggle .header {
display: block;
clear: both;
}
.toggle .header p:before {
content: " ▶ ";
}
.toggle .header.open p:before {
content: " ▼ ";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div class="toggle docutils container">
<div class="header docutils container">
<p><strong>Keywords</strong></p>
</div>
<pre class="literal-block">
<a class="reference internal" href="#ref1"><span class="std std-ref">ref1</span></a> value = 1
<a class="reference internal" href="#ref2"><span class="std std-ref">is_planar</span></a> value= 2
</pre>
</div>
<div class="toggle docutils container">
<div class="header docutils container">
<p><strong>Anchors</strong></p>
</div>
<p id="ref1">ref1 anchor
<p id="ref2">ref2 anchor
</div>
1条答案
按热度按时间wn9m85ua1#
看起来有几个相对较小的问题:
1.您从
targetId
中删除了#
,但如果您要将其与$()
一起使用以按ID查找某些内容,则需要它,因为它表示ID选择器。$(document.location.targetId)
在document.location
上查找名为targetId
的属性,然后使用其值作为$
的参数。我认为您只想使用刚刚创建并填充的targetId
变量。1.你实际上并没有滚动到任何东西,只是向下滑动。
我在下面修复了这个问题,不剥离
#
,只使用$(targetId)
获取元素,并使用slideDown
的完成回调将目标滚动到视图中(使用内置的“平滑”动画):我还在它们之间插入了一个元素,以便我们可以看到滚动。
(Also,您没有关闭段落标签。我知道你没有太多的时间,但它会扰乱格式化程序[和其他阅读你代码的人的思想],我建议这样做。我在上面做过了)。