在 ID 调用时自动打开 <details> 元素答案

【问题标题】：Automatically open <details> element on ID call在 ID 调用时自动打开 <details> 元素
【发布时间】：2016-05-04 16:35:26
【问题描述】：

我试图在通过 ID 调用包含时自动打开一个元素，例如：http://www.example.com/page.html#container。理想情况下，我希望它滚动到页面所在的位置（在摘要元素内），然后打开详细信息元素。显然，本机滚动功能可以正常工作，但如何设置 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”属性？我想确保在调用锚点时内容可见。

【问题讨论】：

先分享你的代码，然后问具体问题。这个问题，正如它所写的，应该作为题外话关闭。阅读帮助中心以了解更多信息。
我没有任何代码，我在问是否可以在不使用 Javascript 的情况下完成。我对
元素了解不多，因为它很新。你想看看我的 HTML 源代码吗？
在阅读指南时，这是一个完全可以接受的问题。我没有要分享的代码，我在询问一个 HTML 元素的行为，因此范围并不荒谬，也不是开放式或主观的。指南中没有说我必须包含代码块，是吗？

标签： html css

【解决方案1】：

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

使用location.hash 获取哈希。可能会收听hashchange 事件。
使用document.getElementById 获取元素。
将其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>

【讨论】：

刚刚到了一个类似的地方，这很奏效。我已经包含了我的代码块（它有点简单），但它工作正常。
还有一个问题，我认为这与事件侦听器有关。当我最初加载带有哈希 (mbts.edu/academics/masters-studies/mdiv/#preaching) 的页面时，<details> 元素会闪烁（根据 :target 选择器），但不会打开。页面加载后，如果我更改哈希或单击文本内锚，
打开就好了。我是否正确，添加第二个监听器会纠正这个问题？
添加 window.addEventListener('load', openDetails); 解决了这个问题。感谢您的解决方案！
我包含调用 openTarget() 假设元素已经加载，但是是的，否则使用 DOMContentLoaded 或 load 事件监听器。
这只是部分答案 - 您还需要滚动到内部元素，以便用户可以看到它。当您单击同一页面上的链接时，滚动很容易，该链接滚动到其他部分。但是因为它是一个 URL，所以当您直接访问该哈希 URL 时，它也应该打开。然后你需要设置history.scrollRestoration = "manual"。但是您不想总是这样做 - 然后您还必须处理任何带有/不带有任何哈希 URL 的页面的滚动恢复。您要做的是有条件地禁用该恢复，使用js滚动，然后将其设置回“自动”。

【解决方案2】：

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

借助 javascript，您可以：

跟踪 url 中哈希锚的变化
通过相应地更改 details 元素的 open 属性来响应它们

这是一个例子，代码在这里 → https://stackoverflow.com/a/55377750/544721

【讨论】：