27

我想要一些与位于此处的主题可折叠标题非常相似的东西：

http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html

不使用 JQuery，这可能吗？

它适用于移动网站，但页面总是处于脱机状态，所以我真的不想使用 jquery。为 jquery mobile 提供自定义样式也比使用纯 css 和自己设置样式要困难得多。

4

4 回答 4

103

使用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 的详细信息和摘要标签来解决此问题，而无需任何 CSS 样式或 Javascript。请注意，Internet Explorer 不支持这些标签。

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>

于 2013-10-03T23:35:46.970 回答
9

您可以使用 acheckbox来模拟 带有CSS的onClick：

input[type=checkbox]:checked + p {
    display: none;
}

JSFiddle

相邻兄弟选择器

于 2013-10-03T23:31:47.990 回答
3

我喜欢 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; }
于 2015-11-14T06:47:09.543 回答
2

当然！毕竟，jQuery 只是一个使用 javascript 的库。

您可以使用 document.getElementById 获取相关元素，然后通过 element.style.height 相应地更改其高度。

elementToChange = document.getElementById('collapseableEl');
elementToChange.style.height = '100%';

将其封装在一个简洁的小功能中，该功能可满足来回切换的需求，您就有了自己的解决方案。

于 2013-10-03T23:37:30.043 回答