当打开带有嵌套“细节"内锚点的页面时，如何扩展细节/摘要?

本文介绍了当打开带有嵌套“细节"内锚点的页面时，如何扩展细节/摘要?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用<details> <summary>制作了可折叠的html <ul>列表.

I made collapsible html <ul> list using <details> <summary>.

但是，如果我尝试引用书签，它不会自动打开.在下面的示例中，我想用#Q0A0调用url页面，以查看页面自动打开Q0节点和Q0A子节点以使Q0A0可见:

However, if I try to reference to bookmark it does not open automatically. In below example, I would love to call url page with #Q0A0 to see page automatically open Q0 node and Q0A subnode to make Q0A0 visible:

例如: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>

还:要点， codepen

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>

P.S.归功于 vokoscreen 在截屏过程中表现出色，而ezgif.com在优化gif 以适合2MiB imgur stackoverflow限制.

P.S. Credits to vokoscreen for good job at screencasting and ezgif.com for good job at optimizing gif to fit 2MiB imgur stackoverflow limit.

这篇关于当打开带有嵌套“细节"内锚点的页面时，如何扩展细节/摘要?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！