展开详细信息/摘要时滚动到锚点？ [英] Scroll to anchor when expanding details/summary?

问题描述

我有一大堆堆积的div，包含 id 锚点和嵌入的视频包含在详细信息和摘要标签。是否可以同时扩展详细信息并一键滚动到 id ？如果我使用下面的脚本，我可以使用 a 标签滚动到锚点：

I have a very large set of stacked divs containing id anchors and embedded videos wrapped in details and summary tags. Is it possible to simultaneously expand the details and scroll to its id in a single click? If I use the script below, I can scroll to an anchor with the a tag:

/* 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>

但是，包装摘要或详细信息本身在 a 标记中将禁用此滚动效果。

However, wrapping the summary or details itself in the a tag will disable this scrolling effect.

/* HTML */

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

<我已经尝试了很多不同的变化，但我似乎无法获得扩展+滚动的综合效果。解决这个问题的正确方法是什么？

I've tried a number of different variations, but I can't seem to get the combined effect of expand + scroll. What's the right approach for solving this issue?

推荐答案

那么，详细信息标签使用打开属性进行扩展，所以你只需点击触发即可添加此属性。

Well, details tag use open attribute to expand, so you just need to add this attribute when click fired.

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

如果要关闭它，请使用：

If you want to close it use:

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

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

In your code better use this selector:

$(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>

这篇关于展开详细信息/摘要时滚动到锚点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！