css - 在 : CSS only 末尾使用隐藏触发器分隔显示隐藏触发器

Question

我在首页有两篇很长的介绍文章。它们只对初次访问者是必需的，所以我想简单地显示一个带有扩展选项的摘要。

我的问题是，由于文章很长，“隐藏”选项需要放在文章的末尾。这使得 radio /输入选项受到限制，除非我能想出一种从最后激活它的方法。有没有办法只使用 css 来触发它？

该网站仅使用 CSS。我不关心过时的浏览器，但我希望它对 SEO 友好(可读)并且没有任何安全触发器(因此没有脚本)。

我已经通读了我能找到的所有内容，但这些选项要么需要相同的触发器来激活显示/隐藏(在我的情况下对用户不友好，因为用户必须在文章中搜索它)或 JS。我试过玩链接和按钮无济于事。我考虑过使用对话框，但这也需要 JS 来激活。模态弹出窗口是一种可能性，但我不确定它对弹出窗口阻止程序有何 react ，所以我将它作为最后的手段。

其他回复有些过时，所以我希望现在有一些技术可以考虑得到更广泛的支持。

这是 jsfiddle .

/*OPTION 1*/
#More,#Art1 {display: none} /*hides checkbox and 2nd part of article */

#More:checked~#Art1 {
	display: block;
}

/*Trying to get it to close: */

#Less {
  display: none}
#Less:checked~#Art2 {
	display: none;
}  

/* OPTION 2 */
.option2 {
  background-color: yellow;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.text2b {
  background: #bbb;
  border-radius: 5px;
  width: 70%;
  position: relative;
  transition: all 5s ease-in-out;
}

.text2b .close {

  transition: all 200ms;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}


  

<!--OPTION 1 -->
<p>OPTION 1. RADIO BUTTONS. The beginning of an article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.2B continued.
</p><input type=checkbox id="More"><label for="More">MORE</label>

<div id="Art1">
  <p>
  Second part of Lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. The End of Option 1.</p>
<input type=checkbox id="Less"><label for="Less">LESS</label>
  
</div>

<!--OPTION 2 -->

<div id="option2a" class="option2">
  
  <p>OPTION 2. MODAL OPTION. The beginning of an article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.2B continued.
  </p><a href="#option2b">MORE</a>

<div id="option2b" class="overlay">
  <div class='text2b'>
  <p>
  Second part of of MODAL OPTION. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. The end. </p>
  
  <a class="close" href="#">CLOSE</a>
 
 </div>
 </div>
<p>
 Other stuff... Meant only to check positioning of Modal.
</p>

fiddle 显示了这个选项和我一直在玩的模态版本。欢迎提出符合先决条件的其他想法。

Answer 1

我几乎要放弃这种技术，但令人惊讶的是，有一个解决方案。 显然，您可以将多个标签绑定(bind)到一个表单控件。因此，通过简单地在文章末尾为“更多”添加一个标签(不是输入字段)，它实际上触发了原始输入。不需要额外的 CSS。

在 FF 中工作得很好，虽然我不明白为什么在其他浏览器中会出现问题，但我没有机会验证。

这个非常简单的解决方案完全归功于 CSS-Tricks 的 Beverleyh:
CSS-Tricks Forum

我希望这对其他人有帮助。我并没有真正意识到这个功能，但可以看到它的许多用途。