如果 <details> 具有“open”属性，如何更改 <summary> 文本

Question

如果details标签具有open属性，则summary文本将显示“关闭”。

我尝试更改文本：

if (jQuery("details").click().attr("open")) {
  jQuery("summary").text("Close");
} else if (jQuery("details").click().attr("")) {
  jQuery("summary").text("Show")
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<details class="description" open>
  <summary class="">Show</summary>
  <p class="">Description text</p>
</details>

Answer 1

只需为此使用 CSS，这里结合整洁的淡入淡出/增长/收缩效果：

details.description summary::after {
  content: attr(data-open);
  opacity: 0;
  font-size: 5px;
}

details.description[open] summary::after {
  content: attr(data-open);
  opacity: 1;
  font-size: 14px;
}

details.description summary::before {
  content: attr(data-close);
  opacity: 0;
  font-size: 5px;
}

details.description:not([open]) summary::before {
  content: attr(data-close);
  opacity: 1;
  font-size: 14px;
}

details.description summary::after,
details.description summary::before {
  display: inline-block;
  transition: all .4s ease-in-out;
  transform-origin: center bottom;
}

<details class="description" open>
  <summary data-open="Close" data-close="Show"></summary>
  <p>Description text</p>
</details>

这是最小版本：

details.description[open] summary::after {
  content: attr(data-open);
}

details.description:not([open]) summary::after {
  content: attr(data-close);
}

<details class="description" open>
  <summary data-open="Close" data-close="Show"></summary>
  <p>Description text</p>
</details>