jquery Javascript:链接到隐藏容器中的锚

6ju8rftf  于 2023-05-28  发布在  jQuery
关注(0)|答案(1)|浏览(85)

我有一个容器中的链接与锚在另一个容器中隐藏默认情况下。当两个容器都显示时,链接工作没有问题,但是当“锚”容器隐藏时,链接不工作。
我想做的是:在点击链接时,显示相对容器并转到锚的行。
以下是我所做的,没有太大的成功(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>
wn9m85ua

wn9m85ua1#

看起来有几个相对较小的问题:
1.您从targetId中删除了#,但如果您要将其与$()一起使用以按ID查找某些内容,则需要它,因为它表示ID选择器。

  1. $(document.location.targetId)document.location上查找名为targetId的属性,然后使用其值作为$的参数。我认为您只想使用刚刚创建并填充的targetId变量。
    1.你实际上并没有滚动到任何东西,只是向下滑动。
    我在下面修复了这个问题,不剥离#,只使用$(targetId)获取元素,并使用slideDown的完成回调将目标滚动到视图中(使用内置的“平滑”动画):
$(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"); // Get the id of the target anchor
    var target = $(targetId);
    target
      .slideDown(() => {
        target[0].scrollIntoView({ behavior: "smooth" });
      })
      .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 style="height: 50em">A bunch of space so we can see scrolling</div>

<div class="toggle docutils container">
  <div class="header docutils container">
    <p><strong>Anchors</strong></p>
  </div>
  <p id="ref1">ref1 anchor</p>
  <p id="ref2">ref2 anchor</p>
</div>

我还在它们之间插入了一个元素,以便我们可以看到滚动。
(Also,您没有关闭段落标签。我知道你没有太多的时间,但它会扰乱格式化程序[和其他阅读你代码的人的思想],我建议这样做。我在上面做过了)。

相关问题