自动打开 ID调用上的元素

Question

我正在尝试在ID调用包含时自动打开元素，例如：http://www.example.com/page.html#container。理想情况下，我希望滚动到所在页面的位置（在摘要元素内），然后打开details元素。显然，本机滚动功能工作正常，但如何设置要打开的details元素呢？

这是我的HTML源代码：

<details class="concentration">
   <summary>
        <h4 id="sample-slug"><?php the_sub_field('emphasis_name'); ?></h4>
    </summary>

    <p><?php the_sub_field('emphasis_description'); ?></p>

    <div class="courses"><?php the_sub_field('emphasis_course_list'); ?></div>
</details>

当调用example.com/page.html#sample-slug时，如何让details元素知道并添加“open”属性？我想确保在调用锚点时内容是可见的。

Answer 1

我不认为你可以单独用CSS打开<details>。但是你可以：

1. 获取location.hash的哈希值。可能会听hashchange事件。
2. 使用document.getElementById获取元素。
3. 将其open属性设置为true。

function openTarget() {
  var hash = location.hash.substring(1);
  if(hash) var details = document.getElementById(hash);
  if(details && details.tagName.toLowerCase() === 'details') details.open = true;
}
window.addEventListener('hashchange', openTarget);
openTarget();

:target {
  background: rgba(255, 255, 200, .7);
}

<details id="foo">Details <summary>Summary</summary></details>
<div><a href="#foo">#foo</a> <a href="#bar">#bar</a></div>

Answer 2

下面我提供适用于嵌套<details><summary>元素的解决方案：

借助javascript，您可以：

• 跟踪url中哈希锚的更改
• 通过相应地改变细节元素的open属性来对它们做出反应

这是做它的例子，在这里编码→https://stackoverflow.com/a/55377750/544721