html 单击事件 隐藏 显示div,在不使用jQuery的HTML和CSS中单击时显示隐藏div

使用label和checkbox输入

使所选项目保持打开状态并切换。

.collapse{

cursor: pointer;

display: block;

background: #cdf;

}

.collapse + input{

display: none; /* hide the checkboxes */

}

.collapse + input + div{

display:none;

}

.collapse + input:checked + div{

display:block;

}

Collapse 1

Content 1

Collapse 2

Content 2

使用label和命名radio输入

与复选框类似，它仅关闭已打开的复选框。在两个输入上

使用name="c1" type="radio"。

.collapse{

cursor: pointer;

display: block;

background: #cdf;

}

.collapse + input{

display: none; /* hide the checkboxes */

}

.collapse + input + div{

display:none;

}

.collapse + input:checked + div{

display:block;

}

Collapse 1

Content 1

Collapse 2

Content 2

使用tabindex和:focus

与radio输入类似，您还可以使用Tab键触发状态。

在手风琴外部单击将关闭所有打开的项目。

.collapse > a{

background: #cdf;

cursor: pointer;

display: block;

}

.collapse:focus{

outline: none;

}

.collapse > div{

display: none;

}

.collapse:focus div{

display: block;

}

Collapse 1

Content 1....

Collapse 2

Content 2....

使用 :target

与使用radio输入类似，您还可以使用Tab和⏎键进行操作

.collapse a{

display: block;

background: #cdf;

}

.collapse > div{

display:none;

}

.collapse > div:target{

display:block;

}

Collapse 1

Content 1....

Collapse 2

Content 2....

使用和标记(纯HTML)

您可以使用HTML5的detail和summary标签来解决此问题，而无需任何CSS样式或Javascript。请注意，Internet Explorer(或Microsoft Edge)不支持这些标签。

Collapse 1

Content 1...

Collapse 2

Content 2...