我想要一些与位于此处的 Theming 可折叠标题非常相似的东西：
http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html
不使用 JQuery，这可能吗？
它适用于移动网站，但页面始终处于脱机状态，因此我真的不想使用 jquery。此外，为 jquery mobile 提供自定义样式比使用纯 css 并自己设置样式要困难得多。
在没有 jQuery 的 HTML 和 CSS 中单击时显示隐藏 div
IT技术
javascript
html
css
2021-01-17 06:00:26
5个回答
使用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;
}<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="checkbox">
<div>Content 1</div>
<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="checkbox">
<div>Content 2</div>使用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;
}<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="radio" name="c1">
<div>Content 1</div>
<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="radio" name="c1">
<div>Content 2</div>使用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;
}<div class="collapse" tabindex="1">
<a>Collapse 1</a>
<div>Content 1....</div>
</div>
<div class="collapse" tabindex="1">
<a>Collapse 2</a>
<div>Content 2....</div>
</div>使用 :target
与使用radio输入类似，您还可以使用Tab和⏎键进行操作
.collapse a{
display: block;
background: #cdf;
}
.collapse > div{
display:none;
}
.collapse > div:target{
display:block;
}<div class="collapse">
<a href="#targ_1">Collapse 1</a>
<div id="targ_1">Content 1....</div>
</div>
<div class="collapse">
<a href="#targ_2">Collapse 2</a>
<div id="targ_2">Content 2....</div>
</div>使用<detail>和<summary>标签（纯 HTML）
您可以使用 HTML5 的 detail 和 summary 标签来解决这个问题，而无需任何 CSS 样式或 Javascript。请注意，Internet Explorer 不支持这些标签。
<details>
<summary>Collapse 1</summary>
<p>Content 1...</p>
</details>
<details>
<summary>Collapse 2</summary>
<p>Content 2...</p>
</details>我喜欢 Roko 的回答，并在其中添加了几行，以便您得到一个三角形，该三角形在元素隐藏时指向右侧，在元素显示时指向下方：
.collapse { font-weight: bold; display: inline-block; }
.collapse + input:after { content: " \25b6"; display: inline-block; }
.collapse + input:checked:after { content: " \25bc"; display: inline-block; }
.collapse + input { display: inline-block; -webkit-appearance: none; -o-appearance:none; -moz-appearance:none; }
.collapse + input + * { display: none; }
.collapse + input:checked + * { display: block; }
当然！jQuery 毕竟只是一个使用 javascript 的库。
您可以使用 document.getElementById 获取相关元素，然后通过 element.style.height 相应地更改其高度。
elementToChange = document.getElementById('collapseableEl');
elementToChange.style.height = '100%';
将其封装在一个适合来回切换的简洁小功能中，您就有了自己的解决方案。
使用 display:none 对 SEO 不友好。以下方式允许搜索隐藏的内容。添加转换延迟可确保隐藏内容中包含的任何链接都是可点击的。
.collapse > p{
cursor: pointer;
display: block;
}
.collapse:focus{
outline: none;
}
.collapse > div {
height: 0;
width: 0;
overflow: hidden;
transition-delay: 0.3s;
}
.collapse:focus div{
display: block;
height: 100%;
width: 100%;
overflow: auto;
}
<div class="collapse" tabindex="1">
<p>Question 1</p>
<div>
<p>Visit <a href="https://stackoverflow.com/">Stack Overflow</a></p>
</div>
</div>
<div class="collapse" tabindex="2">
<p>Question 2</p>
<div>
<p>Visit <a href="https://stackoverflow.com/">Stack Overflow</a></p>
</div>
</div>
其它你可能感兴趣的问题