Question

我在主页上有两篇很长的介绍性文章。它们仅对于首次访问者才是必需的，因此我只想显示一个摘要，并带有扩展它的选项。

我的问题是，由于文章较长，因此“ HIDE”选项必须位于文章末尾。除非我能找出从头开始激活它的方法，否则无线电/输入选项将受到限制。有没有办法仅使用CSS触发它？

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

我已经阅读了所有可以找到的内容，但是这些选项或者需要相同的触发器来激活显示/隐藏（在我看来，这不是用户友好的，因为用户必须在文章中进行搜索）或JS。我尝试使用链接和按钮都无济于事。我考虑过使用对话框，但这也需要激活JS。可能会出现模式弹出窗口，但是我不确定弹出窗口阻止程序会如何反应，因此我将其作为最后的选择。

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

这里是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>

小提琴显示了此选项以及我一直在使用的模式版本。欢迎其他符合先决条件的想法。

Answer 1

我刚刚放弃了这项技术，但是令人惊讶的是，有一个解决方案。显然，您可以将多个标签绑定到一个窗体控件。因此，只需在文章末尾添加“更多”的标签（而非输入字段），它实际上会触发原始输入。无需额外的CSS。

在FF中就像一个魅力一样工作，虽然我看不到为什么其他浏览器会出问题，但我没有机会进行验证。

CSS-Tricks的Beverleyh对此出色的简单解决方案给予了充分的评价：
CSS-Tricks Forum

我希望这对其他人有帮助。我并不是很了解此功能，但是可以看到很多用途。

单独的Show-Hide触发器，末尾具有Hide触发器：仅CSS

1 个答案: