当我单击单选按钮时，为什么我的显示/隐藏样式不能工作？

Question

我试图使用CSS单选按钮哈克显示隐藏的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适用于DOM结构，其中.reveal-if-active-skillsAll是您的无线电按钮的兄弟级。如果具有与单选按钮的父元素不同的父元素，则无法使其工作。

小警告:可能的意外副作用

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

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

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

学习根据现有的规则正确使用标记！

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

如何解决这一问题--并避免今后出现类似的问题

不要只是抄袭你不明白的“黑客”--它几乎总是会在某些你无法预见和( b)修复的地方产生意想不到的后果。所以，阅读这个答案，阅读我发布的链接背后可以找到的东西，理解你在做什么。