僅限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的「黑客」爲Click事件。 然後，我使用+選擇器來定位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>