html - 为什么单击单选按钮时我的显示/隐藏样式不起作用？

Question

我正在尝试使用 CSS 单选按钮 hack 来显示隐藏的 div，但我无法在单击时显示它。下面的当前代码是隐藏的，当我单击复选框时没有任何反应。我打算添加类似的框(然后隐藏它们)来显示一些轻内容的选项卡。 有人可以提供一些帮助吗？

这是html(只写了第一个框):

<section class="panel clearfix skillsBox">
<div class="wizard wizard-vertical clearfix" id="wizard-2">
<ul class="steps">
  <li class="step changeSkill">
    <input type="radio" id="zskills"><label for="zskills"><span class="badge badge-info">1</span>Feel Activities</label>
  </li>
  <div class="reveal-if-active-skillsAll">
    <div class="step-pane step-content" id="all">
      <ul>
        <li>All activities in the Feel stage are listed below.<br> </li>
        <li>You can also click on each skill at the left to show activities that teach that specific skill.</li>
      </ul>
    </div>
  </div>
  <li class="step"><a href="javascript:void(0)" class="changeSkill" data-target="#Empathy" data-skill="Empathy"><span class="badge badge-info">2</span>Empathy</a></li>
    <div class="step-pane step-content" id="Empathy">
      <ul>
        <li>Ability to sense other people's emotions and thoughts, especially by imagining someone else's perspective in what they are thinking and feeling<br> </li>
        <li>Empathy allows you to truly understand how and why people are affected by the issues that surround them, and what solutions could truly impact the problem. </li>
      </ul>
    </div>
  <li class="step"><a href="javascript:void(0)" class="changeSkill" data-target="#Awareness" data-skill="Awareness"><span class="badge badge-info">3</span>Awareness</a></li>
    <div class="step-pane step-content" id="Awareness">
      <ul>
        <li>Ability to show a true understanding of yourself and others, by being conscious of your own thoughts and actions as well as of those around you</li>
        <li>It is important to be aware of the people, places, and things around you, in order to be conscious and fully sensitive to the problems that you and your community may be facing and what can be used to solve them. </li>
      </ul>
    </div>
  <li class="step"><a href="javascript:void(0)" class="changeSkill" data-target="#Engagement" data-skill="Engagement"><span class="badge badge-info">4</span>Engagement</a></li>
   <div class="step-pane step-content" id="Engagement">
    <ul>
      <li>Ability to be proactively, attentively, and passionately committed to tasks at hand as well as enthusiastic about interacting with the world around you, because you see how you fit into achieving an end goal. </li>
      <li>Engagement is critical for motivation - you care about interacting with your community and your team because you see how you are a part of it and how you can change it. </li>
    </ul>
  </div>
</ul>

这是 CSS:

.reveal-if-active-skillsAll {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked ~ .reveal-if-active-skillsAll {
  opacity: 1;
  max-height: 100px;
  overflow: visible;
}

Answer 1

你在做什么

您使用的是普通兄弟~选择器。在此处查找有关它的更多信息:

https://www.sitepoint.com/web-foundations/general-sibling-selector-css-selector/

为什么不起作用

input[type="radio"]:checked ~ .reveal-if-active-skillsAll适用于 .reveal-if-active-skillsAll 的 DOM 结构是您的单选按钮的兄弟。如果.reveal-if-active-skillsAll，没有办法让它工作具有与单选按钮的父元素不同的父元素。

一个小警告:可能产生意想不到的副作用

另外，请注意 ~ .reveal-if-active-skillsAll将选择所有 sibling .reveal-if-active-skillsAll , 不仅是下一个。

要仅选择下一个，请使用相邻兄弟选择器 + .这需要您的 .reveal-if-active-skillsAll在标记中直接跟在您的单选按钮之后。

https://www.sitepoint.com/web-foundations/adjacent-sibling-selector-css-selector/

学会根据现有规则正确使用标记!

另请注意无序列表中唯一允许的直接子元素<ul> (以及有序列表 <ol> )是 <li> .

如何解决 - 并避免将来出现此类问题

不要只是复制您不理解的“hacks”——它几乎总是会在您无法 a) 预见和 b) 修复的某个时刻产生不良后果。因此，请阅读此答案，阅读我发布的链接背后的内容，并了解您在做什么。