展开所有详细信息标签 [英] Expanding all details tags

问题描述

有人知道是否有一种方法可以为使用语义<details>标记的页面创建一个展开所有链接吗?我设法创建了一个可以自动打开关闭的详细信息的链接:

Anyone know if there is a way to create an expand all link for pages that use the semantic <details> tag? I managed to create a link that would auto-open closed details: Link to details section that expands details section as well

现在，我正在尝试添加一个链接，以扩展所有<details>.

Now I'm trying to add a link that will expand all <details>.

我猜您可以使用javascript来做到这一点，但是我在那儿很虚弱.单击链接会启动脚本，该脚本会在html中找到所有<细节"，并在显示html之前插入单词"open"，从而产生一些效果.将不胜感激.

I'm guessing you can do it with javascript but I'm weak there. Something to the effect of clicking a link that initiates a script that finds all "<details in the html and inserting the word "open" before displaying the html. Little help would be appreciated.

到目前为止，我已经掌握

So far I'v got

<button onclick="openAll()">Expand All</button>

<script>function openAll() {
    var x = document.getElementsByTagName("details");
    var i;
    for (i = 0; i < x.length; i++) {
         x[i].setAttribute("open", "true");
}
</script>

以下内容适用于第一个<details>标记，但是我想上面的循环是不正确的...

The below works for the first <details> tag but I guess my loop in the above is not correct ...

<script>
function openAll() {
    document.getElementsByTagName("details")[0].setAttribute("open", "true"); 
}
</script>

下面是我正在测试的虚拟html

The below is the dummy html that I'm testing on

<details>Hello World<summary>summary</summary>lost</details>
<details>another<summary>good night moon</summary>find me</details>

推荐答案

更新

OP要求将前6个<detail>排除在外.换出.forEach()方法进行for循环.

OP requested that the first 6 <detail>s be excluded. Swapped out .forEach() method for for loop.

请参阅代码段2

---

使用<details>的.open属性.如果打开则为true，如果关闭则为false. 详细信息在摘录中进行了评论.

See Snippet 2

---

Use the .open attribute of <details>. It's true if open false if closed. Details commented in Snippet.

SNIPPET 1

// Reference the toggle link
var xa = document.getElementById('expAll');

// Register link on click event
xa.addEventListener('click', function(e) {

  /* Toggle the two classes that represent "state"
  || determined when link is clicked
  */
  e.target.classList.toggle('exp');
  e.target.classList.toggle('col');

  // Collect all <details> into a NodeList
  var details = document.querySelectorAll('details');

  /* Convert NodeList into an array then iterate
  || throught it...
  */
  Array.from(details).forEach(function(obj, idx) {

    /* If the link has the class .exp...
    || make each <detail>'s open attribute true
    */
    if (e.target.classList.contains('exp')) {
      obj.open = true;
      // Otherwise make it false
    } else {
      obj.open = false;
    }

  });

}, false);

<a href='#/' id='expAll' class='exp'>Expand All</a>

<details>Hello World
  <summary>summary</summary>lost</details>
<details>another
  <summary>good night moon</summary>find me</details>

SNIPPET 2

// Reference the toggle link
var xa = document.getElementById('expAll');

// Register link on click event
xa.addEventListener('click', function(e) {

  /* Toggle the two classes that represent "state"
  || determined when link is clicked
  */
  e.target.classList.toggle('exp');
  e.target.classList.toggle('col');

  // Collect all <details> into a NodeList
  var details = document.querySelectorAll('details');

  /* Convert NodeList into an array then iterate
  || throught it...
  */
  var D = Array.from(details);

  /* Start a for loop at 6 instead of 0
  || Now 0 - 5 details are excluded
  */
  for (let i = 6; i < D.length; i++) {

    /* If the link has the class .exp...
    || make each <detail>'s open attribute true
    */
    if (e.target.classList.contains('exp')) {
      D[i].open = true;
      // Otherwise make it false
    } else {
      D[i].open = false;
    }

  }

}, false);

<a href='#/' id='expAll' class='exp'>Expand All</a>

<details>Hello World
  <summary>summary 0</summary>lost</details>
<details>another
  <summary>good night moon 1</summary>find me</details>
<details>Hello World
  <summary>summary 2</summary>lost</details>
<details>another
  <summary>good night moon 3</summary>find me</details>
<details>Hello World
  <summary>summary 4</summary>lost</details>
<details>another
  <summary>good night moon 5</summary>find me</details>
<details>Hello World
  <summary>summary 6</summary>lost</details>
<details>another
  <summary>good night moon</summary>find me</details>
<details>Hello World
  <summary>summary</summary>lost</details>
<details>another
  <summary>good night moon</summary>find me</details>
<details>Hello World
  <summary>summary</summary>lost</details>
<details>another
  <summary>good night moon</summary>find me</details>
<details>Hello World
  <summary>summary</summary>lost</details>
<details>another
  <summary>good night moon</summary>find me</details>
<details>Hello World
  <summary>summary</summary>lost</details>
<details>another
  <summary>good night moon</summary>find me</details>
<details>Hello World
  <summary>summary</summary>lost</details>
<details>another
  <summary>good night moon</summary>find me</details>
<details>Hello World
  <summary>summary</summary>lost</details>
<details>another
  <summary>good night moon</summary>find me</details>
<details>Hello World
  <summary>summary</summary>lost</details>
<details>another
  <summary>good night moon</summary>find me</details>
<details>Hello World
  <summary>summary</summary>lost</details>
<details>another
  <summary>good night moon</summary>find me</details>

这篇关于展开所有详细信息标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！