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

MMMHUHU

使用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...