那些遇到过的问题

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

Luu*_*lag 6 html css button hyperlink show-hide

我和我的同事在一个包含“常见问题”页面的网站上工作。每个问题之后，都有一个“ Answer”（Antwoord）扰流器按钮。单击按钮将在当前问题下方和下一个问题上方显示答案。再次单击按钮将隐藏答案。这样可以轻松滚动浏览所有问题列表，找到您可能感兴趣的问题。

现在我面临的问题是我想从问题1的答案链接到例如问题5的答案。

我可以给<div>包含问题5的id=属性提供一个链接到该属性的属性，但理想情况下，我想通过使超链接“单击”“答案”按钮来立即显示答案。

事实证明，为了使其能够正常工作，我将需要修改复选框hack，但是我面临一个问题，即我无法在一条文本上同时拥有超链接和标签。

明确一点：我正在寻找仅使用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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

尝试从以下方面实施解决方案： 我可以在CSS中产生onclick效果吗？

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

#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%
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

使用的组合<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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

还相关 如何单击链接时如何切换复选框？

那里有一些很好的建议，但是我无法根据 Tushar的情况调整答案。

Has*_*qui 8

选项1-使用JavaScript

重定向仅在元素可见时有效，而不是设置为display: none。在上面的代码段中，复选框和答案列表均设置display: none为初始状态。

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

<strong id="question1">1. Question 1?</strong>
Run Code Online (Sandbox Code Playgroud)

步骤2： 我们无法使用CSS 选中/取消选中复选框，我们必须使用JavaScript / jQuery来实现此功能。因此，当用户单击链接时，我将基础知识添加到复选框选中的脚本中。

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

<strong id="question1">1. Question 1?</strong>
Run Code Online (Sandbox Code Playgroud) 
<li><a href="#question5" onClick="var str = this.attributes['href'].value + 'Checkbox'; document.getElementById(str.replace('#', '')).checked = true;">Open 5. link first</a></li>
Run Code Online (Sandbox Code Playgroud)

选项2-使用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>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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

zer*_*0ne 1

以下演示是纯 HTML/CSS，没有一点 JavaScript。其中包括许多人忽略的事件属性，并且没有意识到它们是 JavaScript。这是两个例子：

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

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

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

我们用来:target在跳转到目标字段集时打开它。所有用户交互和动画（甚至使用滚动scroll-behavior: smooth）仅通过以类为中心的 CSS 和策略性 HTML 布局来实现。没有使用大量<br>或使用任何 JavaScript 进行任何妥协。CSS 中使用的唯一 #id 是一个非必要的规则集，因此只要您坚持布局模式，类分配扩展应该是轻松的。

更新
HassanSiddiqui 给我带来了一种边缘情况的意图，请参阅下面的评论。我说边缘情况是因为我没有看到用户完全专注于常见问题解答，以至于他们需要返回并使用该特定链接。尽管如此，为了完整起见，我已将其更新为以下内容：

  1. label.tgr问题#5 的初始值为display:none。

  2. 它的位置是a.tgr针对问题 #5 的复选框input#act5。

  3. 现在备份到问题#1 中的链接，让我们回忆一下那里发生的情况：单击该链接时fieldset#t5c2是现在并且永远:target，这使得关闭它变得困难，因为input#act5未选中。

  4. 所以#t5c2是通过链接打开的，现在是:target。要从中删除该状态，#t5c2 a.tgr请单击input#act5:target。

  5. 所以此时a.tgr将被替换为label.tgr和#t5c2关闭。我不会详细介绍更多细节，因为我自己都感到困惑，所以只需回顾一下 CSS 即可。

在全页模式下查看演示，初始紧凑模式下的 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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

261 次

最近记录：

6 年，3 月 前
我可以在CSS中使用onclick效果吗？ 308
更多相关链接
相关归档
如何在悬停而不是单击时使Twitter Bootstrap菜单下拉列表 1146
CSS:<div>元素中的center元素 155
我可以通过编程方式单击按钮以获得预定义的意图吗？ 94
HTML多选框 64
在固定位置容器中滚动部分内容 58
如何从特定PrimeFaces删除边框p:panelGrid？ 57
如何限制HTML <select>下拉列表中的可见选项？ 38
<br/>清除中的vs <div /> 23
从显示屏向下滑动动画:无显示:阻止？ 21
你如何检查浏览器中的CSS变量？ 19
难疑归档
如何异步上传文件？ 2841
如何在Java中声明和初始化数组？ 1946
使div填充剩余屏幕空间的高度 1743
为什么模板只能在头文件中实现？ 1660
什么是 ":-!!" 用C代码？ 1627
禁用Chrome缓存以进行网站开发 1563
你怎么读斯坦丁？ 1389
如何查看Git提交中的更改？ 1364
如何获得最近提交的Git分支列表？ 1197
如何在div中垂直对齐文本？ 1102