创建一个像html复选框一样的div

Question

我想在点击时打开/关闭div(它应该像html复选框一样)并使用css进行可见的更改.这可能没有Javascript,还是我必须使用Javascript？

如果您已创建此类脚本,请分享.

提前谢谢你的帮助.

Answer 1

只需使用CSS代码,您就可以通过隐藏复选框和样式化标签来轻松完成此操作:

HTML

<div id="checkboxes">
    <input type="checkbox" name="rGroup" value="1" id="r1" checked="checked" />
    <label class="whatever" for="r1"></label>
    <input type="checkbox" name="rGroup" value="2" id="r2" />
    <label class="whatever" for="r2"></label>
    <input type="checkbox" name="rGroup" value="3" id="r3" />
    <label class="whatever" for="r3"></label>
</div>

CSS

.whatever{
    background-color: red;
    display: inline-block;
    width: 100px;
    height: 100px;
}

#checkboxes input[type=checkbox]{
    display: none;
}

#checkboxes input[type=checkbox]:checked + .whatever{
    background-color: green;
}

你可以在这里看看这个简单的代码:
JSFiddle

希望这会有所帮助!:)

Answer 2

您可以通过使用 label 元素来包装您想要可点击的 div 来实现此操作，而无需使用 javascript：

<input name="checkbox1" id="checkbox1" type="checkbox">
<label for="checkbox1">
   Click me
</label>

和CSS：

input {
  display:none;
}
:checked + label {
  border: 1px solid rgba(81, 203, 238, 1);
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

请参阅此处的 css 样式示例http://jsfiddle.net/vyP7c/761/

Answer 3

好吧，你必须使用 javascript，这非常简单。您只需要在操作时更改 div 的 css 样式即可。

<a href='javascript: toggle()'>toggle</a>
<div id='div1' style='display:none'>
Don't display me
</div>

<script>
function toggle(){
    var div1 = document.getElementById('div1')
    if (div1.style.display == 'none') {
        div1.style.display = 'block'
    } else {
        div1.style.display = 'none'
    }
}
</script>