如果 <details> 具有“打开”属性，如何更改 <summary> 文本答案

【问题标题】：How to change <summary> text if <details> has 'open' attr如果 <details> 具有“打开”属性，如何更改 <summary> 文本
【发布时间】：2019-03-06 20:09:15
【问题描述】：

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

【问题讨论】：

你必须使用属性吗？为什么不使用 true 和 false 的数据属性？ data-open="true" 并像这样读取它的值： data('open');并像这样写： data('open', true);如果你必须使用属性......然后看看这个答案：stackoverflow.com/questions/1318076/…
这里根本不需要 Javascript。这可以通过 CSS 实现，并且速度更快。请参阅下面的答案。

标签： jquery html

【解决方案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>

【讨论】：

完美。这让我无需弄清楚如何定位被点击的元素。不知道这件事。谢谢。
仅使用 CSS，您甚至可以使当前文本淡出而其他文本淡入。查看更新的答案。
是否有任何链接可以深入了解该功能？
不。这一切都在我的脑海里，我猜。也许其他人可以提供一个链接？

【解决方案2】：

使用 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>

【讨论】：

谢谢。如果我有 5 个或 10 个详细信息/摘要，我是否只能影响已点击的那个？
再次，只需使用 CSS 而不是 jQuery 或 Javascript。 CSS也没有这个问题。
OP 将 jquery 作为标签，所以我在 jQuery 中给了他一个答案。 @connexo
@Paolo 很好！我只是想指出这个特殊用例的优越解决方案。

【解决方案3】：

这是一个不使用 CSS 的极简解决方案。
只需使用.attr() 和.removeAttr() 添加或删除“open”属性。

$("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>

【讨论】：