展开详细信息/摘要时滚动到锚点？答案

【问题标题】：Scroll to anchor when expanding details/summary?展开详细信息/摘要时滚动到锚点？
【发布时间】：2018-01-14 23:57:51
【问题描述】：

我有一组非常大的堆叠 div，其中包含 id 锚点和嵌入在 details 和 summary 标签中的视频。是否可以通过单击同时展开details 并滚动到其id？如果我使用下面的脚本，我可以滚动到带有a 标签的锚点：

/* JS */

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 400, 'swing', function () {
            window.location.hash = target;
        });
    });
});

/* HTML */

<div id="anchor></div>

<a href="#anchor">Scroll to anchor</a>

但是，将summary 或details 本身包装在a 标记中会禁用此滚动效果。

/* HTML */

<div id="anchor">
    <details><a href="#anchor"><summary>Embedded Video</summary></a>
        <div class="youtube-player" data-id="null"></div>
    </details>
</div>

我尝试了许多不同的变体，但似乎无法获得展开 + 滚动的组合效果。解决此问题的正确方法是什么？

【问题讨论】：

所以你的意思是想同时滚动到锚点并展开？
正确，完全正确。我想展开详细信息并立即滚动到包含我单击的详细信息/摘要的关联 div id 锚点。似乎这应该是可能的，但我不明白！
有趣，佩德拉姆。是的，您的解决方案非常接近我想要做的。但是，锚链接现在与详细信息和摘要 div 分开。有没有办法让这些是一回事？编辑：另外，不幸的是，这会打开所有细节。我想将每个 div 彼此隔离。
分离是什么意思？和是一回事，我不清楚。请详细说明您到底想做什么？
我有一长串 div。基本上，每个都有一个唯一的 id。当我单击其中一个 div 时，我想打开该特定 div 的详细信息以显示嵌入的视频。滚动效果只是使视频居中。我不确定这是否有助于澄清。如果您有任何想法，请告诉我！

标签： javascript jquery html css

【解决方案1】：

好吧，details标签使用open属性来展开，所以你只需要在点击触发时添加这个属性。

$('details').attr('open', true);

如果你想关闭它，请使用：

$('details').attr('open', false);

在你的代码中最好使用这个选择器：

$(target + ' details').attr('open', true);

$(document).ready(function() {
  $('a[href^="#"]').on('click', function(e) {
    e.preventDefault();
    var target = this.hash,
      $target = $(target);
      $(target + ' details').attr('open', true);
    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 400, 'swing', function() {
      window.location.hash = target;
    });

  });
});

#divide {
height: 500px;
}

body {
  padding-bottom: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#anchor1">Scroll to anchor</a>
<br>
<a href="#anchor2">Scroll to anchor</a>
<br>
<a href="#anchor3">Scroll to anchor</a>
<br>
<a href="#anchor4">Scroll to anchor</a>

<div id="divide"></div>

<div id="anchor1">
    <details><a href="#anchor1"><summary>Embedded Video</summary></a>
        <div class="youtube-player" data-id="null"></div>
    </details>
</div>

<div id="anchor2">
    <details><a href="#anchor2"><summary>Embedded Video</summary></a>
        <div class="youtube-player" data-id="null"></div>
    </details>
</div>

<div id="anchor3">
    <details><a href="#anchor3"><summary>Embedded Video</summary></a>
        <div class="youtube-player" data-id="null"></div>
    </details>
</div>

<div id="anchor4">
    <details><a href="#anchor4"><summary>Embedded Video</summary></a>
        <div class="youtube-player" data-id="null"></div>
    </details>
</div>

【讨论】：