使用超链接在复选框 hack 中切换复选框的状态

Question

我和我的同事在一个包含常见问题解答页面的网站上工作。在每个问题之后，都有一个 "Answer"(Antwoord) 剧透按钮。单击该按钮会在当前问题下方和下一问题上方显示答案。再次单击该按钮可隐藏答案。这样可以轻松滚动浏览所有问题列表并找到您可能感兴趣的问题。

现在我面临的问题是，我想link从问题1的答案中得到例如问题5的答案。

我可以给包含问题 5 的 <div> 一个 id= 属性到 link，但理想情况下，我想立即显示答案使 hyperlink "click" 成为应答按钮。

事实证明，我需要修改复选框黑客才能使其正常工作，但我面临的问题是我不能在一件作品上同时拥有 Hyperlink 和标签文本。

明确一点： 我正在寻找仅使用 HTML/CSS.

的解决方案

我的原始代码只有一个剧透按钮

.spoilerbutton {
  display: block;
  border: none;
  padding: 0px 0px;
  margin: 10px 0px;
  font-size: 150%;
  font-weight: bold;
  color: #000000;
  background-color: transparent;
  outline: 0;
}

.spoiler {
  overflow: hidden;
}

.spoiler>div {
  -webkit-transition: all 0s ease;
  -moz-transition: margin 0s ease;
  -o-transition: all 0s ease;
  transition: margin 0s ease;
}

.spoilerbutton[value="Antwoord"]+.spoiler>div {
  margin-top: -500%;
}

.spoilerbutton[value="Hide Antwoord"]+.spoiler {
  padding: 5px;
}

<strong>1. Question 1?</strong> <input class="spoilerbutton" onclick="this.value=this.value=='Antwoord'?'Verberg':'Antwoord';" type="button" value="Antwoord" />
<div class="spoiler">
  <div>
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </div>
</div>

尝试实施解决方案来自： Can I have an onclick effect in CSS?

我得到以下不起作用的信息：

#btnControll1 {
    display: none;
}

.spoilerbutton {
  display: block;
  border: none;
  padding: 0px 0px;
  margin: 10px 0px;
  font-size: 150%;
  font-weight: bold;
  color: #000000;
  background-color: transparent;
  outline: 0;
}

.spoiler {
  overflow: hidden;
}

.spoiler>div {
  -webkit-transition: all 0s ease;
  -moz-transition: margin 0s ease;
  -o-transition: all 0s ease;
  transition: margin 0s ease;
}

#btnControl1:checked + label {
margin-top; -500%
}

<strong>1. Question 1?</strong> <input type"chekbox" id="btnControl1" />
<label class="spoilerbutton" for="btnControl1">Antwoord</label>
<div class="spoiler">
  <div>
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </div>
</div>

使用 <label> 和 <a href> 的组合（也不起作用）

.spoilerbutton {
display: none;
}
.spoiler {
overflow: hidden;
height:2em;
}
.spoiler>div {
-webkit-transition: all 0s ease;
-moz-transition: margin 0s ease;
-o-transition: all 0s ease;
transition: margin 0s ease;
}
.spoilerbutton+.spoiler>div {
margin-top: -500%;
}
.spoilerbutton+.spoiler>label:before {
content: 'Antwoord';
font-size: 150%;
font-weight: bold;
color: #000000;
}
.spoilerbutton:checked+.spoiler>label:before {
content: 'Verberg';
}
.spoilerbutton:checked+.spoiler {
height:auto;
}
.spoilerbutton:checked+.spoiler>div {
margin-top: 0;
}

<strong>1. Question 1?</strong> <input type="checkbox" id="question1" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question1"></label>
<div>
<ul>
<li><a href="#question5"><label for="#answer5">Open 5. link first</label></a></li>
<li><label for="question5"><a href="#answer5">Open 5. label first</a></label></li>
<li><a href="#answer5">Open 5. link only</a></li>
</ul>
</div>
</div>
<strong>2. Question 2?</strong> <input type="checkbox" id="question2" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question2"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<strong>2. Question 3?</strong> <input type="checkbox" id="question3" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question3"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<strong>2. Question 4?</strong> <input type="checkbox" id="question4" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question4"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<br>
<br>
<br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br>
<strong>2. Question 5?</strong> <input type="checkbox" id="question5" value="checked" class="spoilerbutton">
<div class="spoiler" id="answer5">
<label for="question5"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>

也相关How to toggle a checkbox when a link is clicked?

那里有一些很好的建议，但我无法根据自己的情况调整 answer from Tushar。

Answer 1

Option 1 - Using JavaScript

重定向仅在元素可见时有效，未设置为 display: none。在上面的代码片段中，复选框和答案列表都设置为 display: none 作为它们的初始状态。

第 1 步： 将 id 添加到每个 <strong id="question"> 元素。

<strong id="question1">1. Question 1?</strong>

第 2 步： 我们不能 check/uncheck 使用 CSS 的复选框，我们必须使用 JavaScript/jQuery 来实现此功能。因此，当用户单击 link.

时，我将基础知识添加到复选框 checked 脚本中

<li><a href="#question5" onClick="var str = this.attributes['href'].value + 'Checkbox'; document.getElementById(str.replace('#', '')).checked = true;">Open 5. link first</a></li>

.spoilerbutton {
display: none;
}
.spoiler {
overflow: hidden;
height:2em;
}
.spoiler>div {
-webkit-transition: all 0s ease;
-moz-transition: margin 0s ease;
-o-transition: all 0s ease;
transition: margin 0s ease;
}
.spoilerbutton+.spoiler>div {
margin-top: -500%;
}
.spoilerbutton+.spoiler label:before {
content: 'Antwoord';
font-size: 150%;
font-weight: bold;
color: #000000;
}
.spoilerbutton:checked+.spoiler label:before {
content: 'Verberg';
}
.spoilerbutton:checked+.spoiler {
height:auto;
}
.spoilerbutton:checked+.spoiler>div {
margin-top: 0;
}

<strong id="question1">1. Question 1?</strong> 
<input type="checkbox" id="question1Checkbox" value="checked" class="spoilerbutton">
  <div class="spoiler">
    <label for="question1Checkbox"></label>
    <div>
      <ul>
        <li><a href="#question5" onClick="var str = this.attributes['href'].value + 'Checkbox'; document.getElementById(str.replace('#', '')).checked = true;">Open 5. link first</a></li>
      </ul>
    </div>
</div>
<strong id="question2">2. Question 2?</strong> 
<input type="checkbox" id="question2Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
  <label for="question2Checkbox"></label>
  <div>
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </div>
</div>
<strong id="question3">2. Question 3?</strong> 
<input type="checkbox" id="question3Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
  <label for="question3Checkbox"></label>
  <div>
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </div>
</div>
<strong id="question4">2. Question 4?</strong> 
<input type="checkbox" id="question4Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
  <label for="question4Checkbox"></label>
  <div>
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </div>
</div>
<br>
<br>
<br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br>
<strong id="question5">2. Question 5?</strong> 
<input type="checkbox" id="question5Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler" id="answer5">
  <label for="question5Checkbox"></label>
  <div>
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </div>
</div>

Option 2 - Using CSS

通过使用 CSS :target 选择器和一点点结构更新，我们可以使用 CSS.

实现功能

.spoilerbutton {
display: none;
}
.spoiler {
overflow: hidden;
height:2em;
}
.spoiler>div {
-webkit-transition: all 0s ease;
-moz-transition: margin 0s ease;
-o-transition: all 0s ease;
transition: margin 0s ease;
}
.spoilerbutton+.spoiler .listOfAnswer {
margin-top: -500%;
}
.spoilerbutton+.spoiler .labelWrap {
  display: inline-block;
  position: relative;
}
.spoilerbutton+.spoiler .labelWrap label:before {
content: 'Antwoord';
font-size: 150%;
font-weight: bold;
color: #000000;
}
.spoilerbutton:checked+.spoiler .labelWrap label:before {
content: 'Verberg';
}
.spoilerbutton:checked+.spoiler {
height:auto;
}
.spoilerbutton:checked+.spoiler .listOfAnswer {
margin-top: 0;
}

:target + .spoilerbutton + .spoiler {
height:auto;
}
:target + .spoilerbutton + .spoiler .labelWrap label:before {
content: 'Verberg';
}
:target + .spoilerbutton + .spoiler .labelWrap .resetTarget {
cursor: default;
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
:target + .spoilerbutton + .spoiler .listOfAnswer {
margin-top: 0;
}
.resetTarget {
  display: none;
}

<strong class="qTitle" id="question1">1. Question 1?</strong> 
<input type="checkbox" id="question1Checkbox" value="checked" class="spoilerbutton">
  <div class="spoiler">
    <div class="labelWrap">
      <label for="question1Checkbox"></label>
      <a class="resetTarget" href="#question1Checkbox"></a>
    </div>
    <div class="listOfAnswer">
      <ul>
        <li><a href="#question5">Open 5. link first</a></li>
      </ul>
    </div>
</div>
<strong class="qTitle" id="question2">2. Question 2?</strong> 
<input type="checkbox" id="question2Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
  <div class="labelWrap">
    <label for="question2Checkbox"></label>
    <a class="resetTarget" href="#question2Checkbox"></a>
  </div>
  <div class="listOfAnswer">
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </div>
</div>
<strong class="qTitle" id="question3">2. Question 3?</strong> 
<input type="checkbox" id="question3Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
  <div class="labelWrap">
    <label for="question3Checkbox"></label>
    <a class="resetTarget" href="#question3Checkbox"></a>
  </div>
  <div class="listOfAnswer">
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </div>
</div>
<strong class="qTitle" id="question4">2. Question 4?</strong> 
<input type="checkbox" id="question4Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
  <div class="labelWrap">
    <label for="question4Checkbox"></label>
    <a class="resetTarget" href="#question4Checkbox"></a>
  </div>
  <div class="listOfAnswer">
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </div>
</div>
<br>
<br>
<br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br>
<strong class="qTitle" id="question5">2. Question 5?</strong> 
<input type="checkbox" id="question5Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler" id="answer5">
  <div class="labelWrap">
    <label for="question5Checkbox">
      <a class="resetTarget" href="#question5Checkbox"></a>
    </label>    
  </div>
  <div class="listOfAnswer">
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </div>
</div>

Answer 2

简答

一般来说，是的，可以做到这一点，但由于CSS（Cascading Style Sheets）的限制，它有很大的局限性，所以在现实中答案是没有.

长答案

我们面临的问题是，如果没有任何 JavaScript，您将无法动态地实施解决方案。您可以在可能的 answer 中看到您 linked。在纯 CSS 中，只能定位文件中指定的元素。如果单击 link，CSS 如何知道要检查哪个 checkbox（假设使用 checkbox hack）或扩展哪个答案？答案很简单：不能。

所以没有 JavaScript 的唯一方法是不动态地进行。问题是你不能定位父元素（Cascading Style Sheets）所以甚至没有一个纯粹的 CSS 方法来打开另一个元素，例如, hyperlink 在 :focus 中并且你也不能 check/uncheck 复选框与 CSS.

这将我们带到 JavaScript 作为您的代码结构的唯一可能解决方案。

.spoilerbutton { position: absolute; margin-top: 9px 0 0 -5px; height: 35px; width: 102px; opacity: 0; } .spoilerbutton:checked { width: 86px; } .spoilerbutton~.text::after { content: "Antwoord"; } .spoilerbutton:checked~.text::after { content: "Verberg"; } .spoilerbutton~.spoiler { display: none; } .spoilerbutton:checked~.spoiler { padding: 5px; display: block; }

<div> <strong>1. Question 1?</strong> <p class="text"></p> <input class="spoilerbutton" type="checkbox" /> <h2 class="text"></h2> <div class="spoiler"> <div> <ul> <li><a onclick="document.querySelector(this.attributes['href'].value + ' .spoilerbutton').checked = true;" href="#answer3">Open answer 3</a></li> <li>possible answer 2.</li> <li>possible answer 3.</li> </ul> </div> </div> </div> <div> <strong>1. Question 2?</strong> <p class="text"></p> <input class="spoilerbutton" type="checkbox" /> <h2 class="text"></h2> <div class="spoiler"> <div> <ul> <li>possible answer 1.</li> <li>possible answer 2.</li> <li>possible answer 3.</li> </ul> </div> </div> </div> <div style="margin-top: 500px" id="answer3"> <strong>1. Question 3?</strong> <p class="text"></p> <input class="spoilerbutton" type="checkbox" /> <h2 class="text"></h2> <div class="spoiler"> <div> <ul> <li>possible answer 1.</li> <li>possible answer 2.</li> <li>possible answer 3.</li> </ul> </div> </div> </div>

一行代码就够了：

document.querySelector(this.attributes['href'].value + ' .spoilerbutton').checked = true;

编辑

实际上我忘记了 :target 伪 class。但是Hassan Siddiqui already completed 用它。但是，您将不得不重组代码，如果您想使用 JavaScript 方法（我强烈推荐），我更喜欢我的代码行。

Answer 3

我稍微简化了代码并创建了一个 semi-working 纯 CSS 选项。我无法让它完全按照您的要求工作，但我认为有人可能仍然觉得它有用。

基本上，我使用 :focus 伪选择器在单击按钮时显示答案。

我还尝试使用 :active 选择器显示另一个答案中的一个答案。这不是很好，因为 :active 选择器在元素不活动时立即消失。

尽管如此，这是一种在单击按钮时仅显示答案的可能解决方案。

/* some quick styling */

.question {
  font-weight: bold;
  margin: 10px 0;
}

.answer {
  display: none;
  font-size: 14px;
  margin: 10px 0;
}

.show-answer {
  background: #cceedd;
}

.show-answer:focus {
  background: #cdcdcd;
}

a.answer-link {
  color: black;
  text-decoration: none;
}

a.answer-link span {
  color: blue;
  text-decoration: underline;
}

/* displaying the answers */

.show-answer:focus + .answer {
  display: block;
}

/* linking to an answer */

.answer-link--2:active ~ .answer--2 {
  display: block;
}

<div class="question">Question 1?</div>
<button class="show-answer show-answer--1">Show Answer</button>
<a class="answer answer--1 answer-link answer-link--2" href="#">This is the answer to Question 1. <span>Clicking and holding this text will open Question 2 answer, until you let go!.</span>.</a>
<hr/>
<div class="question">Question 2?</div>
<button class="show-answer show-answer--2">Show Answer</button>
<div class="answer answer--2">This is the answer to Question 2.</div>
<hr/>
<div class="question">Question 3?</div>
<button class="show-answer show-answer--3">Show Answer</button>
<div class="answer answer--3">This is the answer to Question 3.</div>
<hr/>
<div class="question">Question 4?</div>
<button class="show-answer show-answer--4">Show Answer</button>
<div class="answer answer--4">This is the answer to Question 4.</div>
<hr/>
<div class="question">Question 5?</div>
<button class="show-answer show-answer--5">Show Answer</button>
<div class="answer answer--5">This is the answer to Question 5.</div>

Answer 4

其他答案已经说明了在没有 JavaScript 的情况下解决这个问题的缺点。

在语义方面，我推荐使用details元素。

为了 link 从一个问题到另一个问题，并同时显示该答案，请使用一个小脚本以编程方式更新详细信息元素上的 [open] 属性。

const section = document.getElementById('section');

section.addEventListener('click', (e) => {
  const target = e.target;
  const isLink = target.classList.contains('link');

  if (!isLink) {
    return;
  }

  const href = target.getAttribute('href');
  const question = target.closest('section').querySelector(href);

  question.setAttribute('open', true);
});

body {
  height: 2000px;
}

summary {
  cursor: pointer;
}

<section id="section">
  <details id="q1">
    <summary>Question 1</summary>
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>see the answer to <a class="link" href="#q4">question 4</a></li>
    </ul>
  </details>
  <details id="q2">
    <summary>Question 2</summary>
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </details>
  <details id="q3">
    <summary>Question 3</summary>
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </details>
  <details id="q4">
    <summary>Question 4</summary>
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </details>
</section>

Answer 5

下面的演示是纯粹的 HTML/CSS -- 没有一点 JavaScript。其中包括 on-event 属性，许多人都忽略了这些属性并且没有意识到它们是 JavaScript。这里有两个例子：

<button onclick="jsFunction(this); return false">X</button>

<a href="#/" onclick="this.value=this.value=='Antwoord'?'Verberg':'Antwoord';">X</a>

每个问答都是一个隐藏的复选框，一个包含可见图例和标签的折叠字段集，以及一个作为隐藏内容的定义列表。 visibility: collapse/visible 用于该部分。

跳转到目标字段集时，我们使用:target打开目标字段集。所有用户交互和动画（甚至使用 scroll-behavior: smooth 的滚动）仅通过 class-centric CSS 和战略 HTML 布局。使用大量 <br> 或使用任何 JavaScript 都没有做出任何妥协。 CSS 中使用的唯一 #id 是 non-essential 规则集，因此只要您坚持布局模式，class 分配扩展应该是无痛的。

更新
HassanSiddiqui 提出了我对边缘案例的意图，请参阅下面的评论。我说边缘案例是因为我没有看到用户完全专注于常见问题解答，以至于他们需要返回并使用特定的 link。不过，为了完整起见，我更新了以下内容：

问题 #5 的 label.tgr 最初是 display:none。
它的位置是 a.tgr，它针对问题 #5 的复选框，input#act5。
现在回到问题 #1 中的 link，让我们回想一下那里发生了什么：当 link 被点击时 fieldset#t5c2 现在和永远 :target 这使得关闭变得困难，因为 input#act5 未被选中。
所以 #t5c2 是由 link 打开的，现在是 :target。要从 #t5c2 中删除该状态，请单击 a.tgr 使 input#act5:target.
所以此时a.tgr会被label.tgr代替，#t5c2关闭。我不会详细介绍我自己感到困惑，所以只需查看 CSS.

在full page模式下查看demo，初始compact模式下Snippet的iframe严重不成比例

html {
  scroll-behavior: smooth;
}

.main {
  height: 300vh;
  padding: 2vh 2vw 30vh;
}

.set {
  overflow: hidden;
  visibility: collapse;
  margin: 2vh 0;
}

.cat {
  max-height: 0;
  font-size: 0;
  opacity: 0;
}

:target .cat,
.act:checked+.set .cat {
  max-height: 100vh;
  font-size: 1rem;
  opacity: 1.0;
  transition: opacity 1s, max-height 0.7s;
}

:target,
.act:checked+.set {
  max-height: 100vh;
  visibility: visible;
  transition: 0.7s
}

.que,
.tgr {
  visibility: visible;
  max-height: 50vh;
  color: #000;
  font-size: 1rem;
  text-decoration: none;
}

.tgr {
  cursor: pointer;
}

.que::before {
  content: attr(data-idx)'. ';
}

.lnx::after {
  content: ' 'attr(title);
}


/* Question 5 Switch Triggers */

#act1:checked~.set .top {
  outline: 3px solid cyan
}

#act5:target+#t5c2 {
  visibility: collapse;
}

#act5:checked+#t5c2 {
  visibility: visible;
}

#t5c2 label.tgr {
  display: none;
}

#act5:target+#t5c2 label {
  display: inline-block;
}

#act5:target+#t5c2 a {
  display: none;
}

#act1:not(:checked)~#act5:not(:checked)+#t5c2:not(:target) a {
  display: none;
}

#act1:not(:checked)~#act5:not(:checked)+#t5c2:not(:target) label {
  display: inline-block;
}

<form class='main'>

  <input id='act1' class="act" type="checkbox" hidden>
  <fieldset class='set'>
    <legend class='que' data-idx='1'>Question</legend>
    <label class='tgr' for='act1'>Answers</label>
    <dl class='cat'>
      <dt>Category 1A</dt>
      <dd>Topic 1A1</dd>
      <dd>Topic 1A2</dd>
      <dt>Category 1B</dt>
      <dd>Topic 1B1
        <a href='#t5c2' class='lnx' title='Topic 5C2'>Also see</a>
      </dd>
      <dd>Topic 1B2</dd>
    </dl>
  </fieldset>

  <input id='act2' class="act" type="checkbox" hidden>
  <fieldset class='set'>
    <legend class='que' data-idx='2'>Question</legend>
    <label class='tgr' for='act2'>Answers</label>
    <dl class='cat'>
      <dt>Category 2A</dt>
      <dd>Topic 2A1</dd>
      <dd>Topic 2A2</dd>
      <dt>Category 2B</dt>
      <dd>Topic 2B1</dd>
    </dl>
  </fieldset>

  <input id='act3' class="act" type="checkbox" hidden>
  <fieldset class='set'>
    <legend class='que' data-idx='3'>Question</legend>
    <label class='tgr' for='act3'>Answers</label>
    <dl class='cat'>
      <dt>Category 3A</dt>
      <dd>Topic 3A1</dd>
      <dt>Category 3B</dt>
      <dd>Topic 3B1</dd>
      <dd>Topic 3B2</dd>
      <dd>Topic 3B3</dd>
    </dl>
  </fieldset>

  <input id='act4' class="act" type="checkbox" hidden>
  <fieldset class='set'>
    <legend class='que' data-idx='4'>Question</legend>
    <label class='tgr' for='act4'>Answers</label>
    <dl class='cat'>
      <dt>Category 4A</dt>
      <dd>Topic 4A1</dd>
      <dd>Topic 4A2</dd>
      <dd>Topic 4A3</dd>
    </dl>
  </fieldset>

  <input id='act5' class="act" type="checkbox" hidden>
  <fieldset id='t5c2' class='set'>
    <legend class='que' data-idx='5'>Question</legend>
    <label class='tgr' for='act5'>Answers</label>
    <a href='#act5' class='tgr'>Answers</a>
    <dl class='cat'>
      <dt>Category 5A</dt>
      <dd>Topic 5A1</dd>
      <dd>Topic 5A2</dd>
      <dt>Category 5B</dt>
      <dd>Topic 5B1</dd>
      <dd>Topic 5B2</dd>
      <dt>Category 5C</dt>
      <dd>Topic 5C1</dd>
      <dd class='top'>Topic 5C2</dd>
    </dl>
  </fieldset>

</form>

使用超链接在复选框 hack 中切换复选框的状态

Toggle the status of a checkbox in the checkbox hack with a hyperlink

html

css

button

hyperlink

show-hide

简答

长答案

编辑