html - 在嵌套“详细信息”中打开带有锚点的页面时如何扩展详细信息/摘要?
问题描述
我<ul>
使用<details>
<summary>
.
但是,如果我尝试引用书签,它不会自动打开。在下面的示例中,我想调用 url 页面#Q0A0
来查看页面自动打开Q0
节点和子节点Q0A
以使其Q0A0
可见:
例如:list.html#Q0A0
<!DOCTYPE html>
<html lang="en">
<head>
<title>Details/summary opened with anchor via javascript</title>
</head>
<body>
<ul>
<li><details id="Q0"><summary>Q0</summary>
<ul>
<li><details id="Q0A"><summary>Q0A</summary>
<ul>
<li><details id="Q0A0"><summary>Q0A0</summary>Answer to Q0A0</details></li>
<li><details id="Q0A1"><summary>Q0A1</summary>Answer to Q0A1</details></li>
<li><details id="Q0A2"><summary>Q0A2</summary>Answer to Q0A2</details></li>
</ul>
</details>
</li>
<li><details id="Q0B"><summary>Q0B</summary>Answer to Q0B</details></li>
<li><details id="Q0C"><summary>Q0C</summary>Answer to Q0C</details></li>
</ul>
</details>
</li>
<li><details id="Q1"><summary>Q1</summary>
<ul>
<li><details id="Q1A"><summary>Q1A</summary>Answer to Q1A</details></li>
<li><details id="Q1B"><summary>Q1A</summary>Answer to Q1B</details></li>
<li><details id="Q1C"><summary>Q1A</summary>Answer to Q1C</details></li>
</ul>
</details>
</li>
</ul>
</body>
</html>
解决方案
function MakeArrayOfAllPrefixes(str){
//console.log("MakeArrayOfAllPrefixes("+str+")");
var prefixes = [];
for (var i=1; i<=str.length; i++){
prefixes.push(str.substr(0,i));
}
console.log("MakeArrayOfAllPrefixes("+str+") -> returns [" + prefixes + "]");
return prefixes;
}
function SetOpenAttrForIdsAndPrefixes(ids, openAttrBool){
$('details').attr('open',false); // close all others first
console.log("SetOpenAttrForIds([" +ids+"], "+openAttrBool+")");
for (idindex in ids) {
var id = ids[idindex];
if (id != ""){
var prefixes = MakeArrayOfAllPrefixes(id);
for (prefixidx in prefixes) {
var prefix = prefixes[prefixidx];
if(openAttrBool==true) { operationstr="Opening"; } else { operationstr="Closing"};
console.log(operationstr+" <details id='#"+prefix+"'> with $('#"+prefix+").attr('open',"+openAttrBool+");");
$('#'+prefix).attr('open',openAttrBool);
}
}
}
}
function SetOpenAttrForIdsAndPrefixesFromLocationHash(){
var hashes = $(location).attr('hash').split('#');
SetOpenAttrForIdsAndPrefixes(hashes, true);
}
$(document).ready(function(){
SetOpenAttrForIdsAndPrefixesFromLocationHash();
if ("onhashchange" in window) {// does the browser support the hashchange event?
window.onhashchange = function () {
SetOpenAttrForIdsAndPrefixesFromLocationHash();
}
}
});
<p>
Opens details/summeries, all parths, using prefixes. Supports multiple anchors in url, example:
</p>
<ul>
<li><a href="#Q0A0#Q1A">#Q0A0#Q1A</a>,</li>
<li><a href="#Q0B#Q0C#Q1B#Q1C">#Q0B#Q0C#Q1A#Q1C</a>.</li>
</ul>
<p>
references:
<a href="https://webdesign.tutsplus.com/tutorials/explaining-the-details-and-summary-elements--cms-21999">1</a>,
<a href="https://stackoverflow.com/a/48258026/544721">2</a>,
<a href="https://stackoverflow.com/q/55308339/544721">3</a>,
<a href="https://stackoverflow.com/q/3552944/544721">4</a>,
<a href="https://stackoverflow.com/q/2161906/544721">5</a>.
</p>
<ul>
<li><details id="Q0"><summary>Q0</summary>
<ul>
<li><details id="Q0A"><summary>Q0A</summary>
<ul>
<li><details id="Q0A0"><summary>Q0A0</summary><a href="#Q0A0">Answer to Q0A0</a></details></li>
<li><details id="Q0A1"><summary>Q0A1</summary><a href="#Q0A1">Answer to Q0A1</a></details></li>
<li><details id="Q0A2"><summary>Q0A2</summary><a href="#Q0A2">Answer to Q0A2</a></details></li>
</ul>
</details>
</li>
<li><details id="Q0B"><summary>Q0B</summary><a href="#Q0B">Answer to Q0B</a></details></li>
<li><details id="Q0C"><summary>Q0C</summary><a href="#Q0C">Answer to Q0C</a></details></li>
</ul>
</details>
</li>
<li><details id="Q1"><summary>Q1</summary>
<ul>
<li><details id="Q1A"><summary>Q1A</summary><a href="#Q1A">Answer to Q1A</a></details></li>
<li><details id="Q1B"><summary>Q1B</summary><a href="#Q1B">Answer to Q1B</a></details></li>
<li><details id="Q1C"><summary>Q1C</summary><a href="#Q1C">Answer to Q1C</a></details></li>
</ul>
</details>
</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
PS归功于 vokoscreen在截屏方面的出色表现和 ezgif.com 在优化 gif以适应 2MiB imgur stackoverflow 限制方面的出色表现。
推荐阅读
- javascript - 在 Array of Arrays 中找到属性名称并更改(删除)它时,您将如何搜索?
- sql - 为什么将表达式转换为数据类型 int 的算术溢出错误会自行解决?
- python - 如何在 OR 列表正则表达式中找到尽可能少的捕获组
- sql - 获取不同的值sql server 2016
- sql - 获取同一列的当前数据和上个月数据
- r - 将 (+) 1 添加到数据框中有 0 的每一行
- node.js - Mongodb创建对象的副本
- java - 更新到 sdk 版本 23 后,我的应用程序因一些浮动操作按钮错误而崩溃?
- javascript - 是否可以对继承进行建模?
- apache-spark - 过去 end_date 的气流 dag 不会触发计划