html - 单击复选框停止页面顶部(图像下方显示文本)

Question

我正在尝试实现以下的 css 解决方案:

https://jsfiddle.net/slinger55/fdL8xrk8/3/

#toggle{
  position: absolute;
  top: -9999px;
  left: -9999px;
}
span{
  display: none;
}
#toggle:checked + span{
  display: block;
}
img{
  cursor: pointer;
}

<label for="toggle">
  <img style="width: 100%" src="http://i.imgur.com/pOFyUBh.png" />
</label>
<input type="checkbox" id="toggle" />
<span>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius bibendum turpis, ac viverra libero scelerisque sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ipsum metus, dictum in feugiat sit amet, finibus vitae tortor. Cras vestibulum magna vel enim elementum, nec elementum risus mattis. Sed sodales velit vitae elit sagittis convallis vulputate non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et dictum arcu. Duis sed efficitur massa, sit amet pulvinar ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce interdum felis at ligula semper, sit amet aliquam ex venenatis. Etiam feugiat pellentesque dapibus.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius bibendum turpis, ac viverra libero scelerisque sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ipsum metus, dictum in feugiat sit amet, finibus vitae tortor. Cras vestibulum magna vel enim elementum, nec elementum risus mattis. Sed sodales velit vitae elit sagittis convallis vulputate non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et dictum arcu. Duis sed efficitur massa, sit amet pulvinar ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce interdum felis at ligula semper, sit amet aliquam ex venenatis. Etiam feugiat pellentesque dapibus.</p>

</span>

每当我单击图像以显示文本时，页面就会跳到顶部。这是嵌入在 Wordpress 页面上的，所以如果可能的话，我只想坚持使用 css。有没有人知道如何解决这个问题？

谢谢。

Answer 1

解释:

原因是因为给复选框(#toggle)赋予了不寻常的值。 position: absolute 将元素从文档本身中取出，让您可以使用 top、bottom、 将其自由放置在页面上的任何位置>left 或 right 属性。在你的情况下，你已经通过给它 top: -9999px; 把它放在文档的最顶部。左:-9999px；。因此，每次单击标签(或 img)时，它都会跳转到复选框(位于最顶部)。

解决方案:

减少 top 和 left 值或 甚至更好地使用任何其他方法，如 visibility: hidden OR display: none 隐藏复选框而不是推到文档本身的最后。

#toggle{
  position: absolute; /* remove */
  top: -9999px; /* remove */
  left: -9999px; /* remove */
  display: none; /* OR -> visibility: hidden; */
}

#toggle{
  display: none;
}
span{
  display: none;
}
#toggle:checked + span{
  display: block;
}
img{
  cursor: pointer;
}

<label for="toggle">
  <img style="width: 100%" src="http://i.imgur.com/pOFyUBh.png" />
</label>
<input type="checkbox" id="toggle" />
<span>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius bibendum turpis, ac viverra libero scelerisque sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ipsum metus, dictum in feugiat sit amet, finibus vitae tortor. Cras vestibulum magna vel enim elementum, nec elementum risus mattis. Sed sodales velit vitae elit sagittis convallis vulputate non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et dictum arcu. Duis sed efficitur massa, sit amet pulvinar ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce interdum felis at ligula semper, sit amet aliquam ex venenatis. Etiam feugiat pellentesque dapibus.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius bibendum turpis, ac viverra libero scelerisque sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ipsum metus, dictum in feugiat sit amet, finibus vitae tortor. Cras vestibulum magna vel enim elementum, nec elementum risus mattis. Sed sodales velit vitae elit sagittis convallis vulputate non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et dictum arcu. Duis sed efficitur massa, sit amet pulvinar ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce interdum felis at ligula semper, sit amet aliquam ex venenatis. Etiam feugiat pellentesque dapibus.</p>

</span>