如何僅使用css切換Div中的效果？

注意：我試過所有問題&答案與此主題相關。此外，我嘗試了相關的問題，並試圖解決它，但沒有成功。所以請死心一意地閱讀我的問題。如何僅使用css切換Div中的效果？

我想

我click me股利再其次hiddendiv股利顯示。但我想第二次點擊click me Div，然後隱藏hiddendiv Div。 類似的切換事件使用純CSS。
I click me Div然後秒hiddendiv Div顯示。但我點擊其他區域點擊，然後隱藏hiddendiv Div。所以我不想在使用純CSS的任何其他點擊中隱藏hiddendiv Div。

注：只有純CSS，CSS3使用的答案不使用（的JavaScript，jQuery的） &任何其他從控制

代碼

.clicker { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    outline: none; 
 
    cursor: pointer; 
 
    color:#FFF; 
 
} 
 

 
.hiddendiv { 
 
    display: none; 
 
    height: 200px; 
 
    background-color: green; 
 
} 
 

 
.clicker:focus+.hiddendiv { 
 
    display: block; 
 
}

<div> 
 
    <div class="clicker" tabindex="1">Click me</div> 
 
    <div class="hiddendiv"></div> 
 
</div>

來源

2017-02-16 Sumit patel

這是不可能與給定的要求 – LGSon

我確實發佈了一個答案，這是最接近的解決方法，只有CSS和沒有窗體控件 – LGSon

這是不可能與給定的要求，是一個div所有元素。

如果你改變div的作爲鏈接錨a這將是可能的，而且使用:target僞

通過對錨a設置display: inline-block，你可以它的大小，你可以用div

.clicker { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    color:#FFF; 
 
} 
 
.clicker.hidden { 
 
    display: none; 
 
} 
 
.hiddendiv { 
 
    height: 0px; 
 
    background-color: green; 
 
    overflow: hidden; 
 
    transition: height 0.5s; 
 
} 
 
.hiddendiv.nr2 { 
 
    background-color: red; 
 
} 
 

 
#showdiv1:target ~ div a[href="#showdiv1"], 
 
#showdiv2:target ~ div a[href="#showdiv2"] { 
 
    display: none; 
 
} 
 
#showdiv1:target ~ div a[href="#hidediv1"], 
 
#showdiv2:target ~ div a[href="#hidediv2"] { 
 
    display: inline-block; 
 
} 
 
#showdiv1:target ~ div .hiddendiv.nr1, 
 
#showdiv2:target ~ div .hiddendiv.nr2 { 
 
    height: 150px; 
 
}

<div id="showdiv1"></div> 
 
<div id="showdiv2"></div> 
 

 
<div> 
 
    <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a> 
 
    <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a> 
 

 
    <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a> 
 
    <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a> 
 

 
    <div class="hiddendiv nr1"></div> 
 
    <div class="hiddendiv nr2"></div> 
 
</div>

來源

2017-02-16 09:12:47 LGSon

感謝您的回答。但你能否順利幫助你展示展示效果？使用轉換。 –

非常感謝你... –

你實現，使用複選框以一些CSS操作

div input { 
 
    margin-right: 100px; 
 
} 
 

 
.check-btn label { 
 
    display: inline-block; 
 
} 
 

 
.check-btn input { 
 
    display: none; 
 
} 
 

 
.clicker { 
 
    background: green; 
 
    padding: 5px 10px; 
 
} 
 

 
.hiddendiv { 
 
    background: #000; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: none; 
 
} 
 

 
.check-btn input:checked ~ .hiddendiv { 
 
    display: block; 
 
}

<div class="check-btn"> 
 

 
    <input id="myid" type="checkbox" > 
 
    <label for="myid" class="clicker">Click me</label> 
 
    <div class="hiddendiv"></div> 
 

 
</div>

Here jsfiddle

來源

2017-02-16 07:38:05 Chiller

感謝您的回答。但我點擊黑色div然後隱藏黑色div這不是真的 –

您可以使用一個checkbox輸入，如果檢查了這個基於與否可以顯示隱藏div。

下面是一個使用相同的例子。

.clicker { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    outline: none; 
 
    cursor: pointer; 
 
    color:#FFF; 
 
    display:block; 
 
} 
 

 
.hiddendiv { 
 
    display: none; 
 
    height: 200px; 
 
    background-color: green; 
 
} 
 

 
.clicker:focus+.hiddendiv { 
 
    display: block; 
 
} 
 
.hidden{ 
 
    margin-left:-99999px; 
 
} 
 
input#cmn-toggle-7:checked + label + div{ 
 
display:block; 
 
}

<div> 
 
    <input id="cmn-toggle-7" class="hidden" type="checkbox" > 
 
    <label for="cmn-toggle-7" class="clicker" tabindex="1">Click me</label> 
 
    <div class="hiddendiv"></div> 
 
</div>

來源

2017-02-16 07:42:12 aje

謝謝你的回答。但不使用複選框。只有div事件切換沒有任何控制。 –

如何僅使用css切換Div中的效果？

回答

相關問題