如果<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

使用 hasAttribute（）检查该属性是否存在。

$("summary").html("Close");

$("details").click(function() {
  if ($(this)[0].hasAttribute("open")) {
    $("summary").html("Show");
  } else {
    $("summary").html("Close");
  }
});

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

Answer 2

为此只需使用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>

Answer 3

这里是一种极简解决方案，不使用CSS 。
只需使用.attr()和.removeAttr()添加或删除“打开”属性。

$("summary").click(function() {
  if($("details")[0].hasAttribute("open")) {
    $("summary").html("See details");
    $("details")[0].removeAttr("open");
  } else {
    $("summary").html("Hide details");
    $("details")[0].attr("open");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <details>
    <summary>See details</summary>
    <p>My details</p>
  </details>
</div>