CSS複数のonclickイベントのみ

Question

これは一般的に私がCSSで把握しようとしているハックです。私が集めることができるものは理論的にはうまくいくはずです。

#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>