html - 仅限 CSS 多个 onclick 事件

Question

这通常是我试图在 css 中弄清楚的 hack，据我所知，它在理论上应该可行，但事实并非如此。

#expand {
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0);
}

#btn {
  display: none;
}

#btn:checked+label:before {
  transform: rotate(90deg);
}

#btn:checked+label:after {
  transform: rotate(180deg);
}

#btn:checked+.button:before {
  display: none;
}

#btn:checked+.button:after {
  display: inline-block;
}

.button {
  position: relative;
  width: 25px;
  height: 25px;
  display: inline-block;
}

.button:before,
.button:after {
  content: "";
  position: absolute;
  background-color: black;
  transition: transform 0.35s ease-out;
}


/* Vert Line */

.button:before {
  top: 0;
  left: 46%;
  width: 4px;
  height: 100%;
  margin-left: 2px;
  margin-top: 2px;
}


/* Horiz Line */

.button:after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  margin-left: 2px;
}

.inform {
  display: none;
}

<div id="expand">
  <input id="btn" type="checkbox">
  <label class="button" for="btn"></label>
  <div class="inform">
    <h3>Heading</h3>
    <p>Alot of content.</p>
  </div>

如您所见，我对单击事件使用复选框更改 .button 的样式有“技巧”。然后我使用 + 选择器来定位 div .inform。如果我是正确的，+ 选择器意味着它以紧随其后的元素为目标，在这种情况下这应该有效。但事实并非如此，有人可以帮助澄清我对此的理解吗？如果我错了，否则你能帮我指出正确的方向来让它发挥作用吗。

总结:我想让标题和段落在选中复选框时显示，并让 + 符号旋转。

Answer 1

你有类似的选择器:

#btn:checked+.button:before {
  display: none;
}

#btn:checked+.button:before {
  display: inline-block;
}

和#btn:checked+label:before和#btn:checked+.button:before是一回事。

我认为它应该是这样的:

#expand {
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0);
}

#btn {
  display: none;
}

#btn:checked+label:before {
  transform: rotate(90deg);
}

#btn:checked+label:after {
  transform: rotate(180deg);
}

#btn:checked+.button:before {
  display: none;
}

#btn:checked ~ .inform {
  opacity: 1;
}

.button {
  position: relative;
  width: 25px;
  height: 25px;
  display: inline-block;
}

.button:before,
.button:after {
  content: "";
  position: absolute;
  background-color: black;
  transition: transform 0.35s ease-out;
}


/* Vert Line */

.button:before {
  top: 0;
  left: 46%;
  width: 4px;
  height: 100%;
  margin-left: 2px;
  margin-top: 2px;
}


/* Horiz Line */

.button:after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  margin-left: 2px;
}

.inform {
  display: inline-block;
  opacity: 0;
  transition: all .5s ease;
}

<div id="expand">
  <input id="btn" type="checkbox">
  <label class="button" for="btn"></label>
  <div class="inform">
    <h3>Heading</h3>
    <p>Alot of content.</p>
  </div>