html - 仅 CSS 可折叠 DIV
问题描述
我有一个纯 CSS 可折叠 div 的示例。但我想稍微改变一下,以便在标题中也包含内容。我怎样才能做到这一点?
/*
CSS for the main interaction
*/
.accordion>input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.accordion .content {
overflow-y: hidden;
height: 0;
transition: height 0.3s ease;
}
.accordion>input[type="checkbox"]:checked~.content {
height: auto;
overflow: visible;
}
.accordion label {
display: block;
}
/*
Styling
*/
body {
font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
color: #333;
font-weight: 300;
}
.accordion {
margin-bottom: 1em;
}
.accordion>input[type="checkbox"]:checked~.content {
padding: 15px;
border: 1px solid #e8e8e8;
border-top: 0;
}
.accordion .handle {
margin: 0;
font-size: 1.125em;
line-height: 1.2em;
}
.accordion label {
color: #333;
cursor: pointer;
font-weight: normal;
padding: 15px;
background: #e8e8e8;
}
.accordion label:hover,
.accordion label:focus {
background: #d8d8d8;
}
.accordion .handle label:before {
font-family: 'fontawesome';
content: "\f054";
display: inline-block;
margin-right: 10px;
font-size: .58em;
line-height: 1.556em;
vertical-align: middle;
}
.accordion>input[type="checkbox"]:checked~.handle label:before {
content: "\f078";
}
/*
Demo purposes only
*/
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
padding: 40px;
}
a {
color: #06c;
}
p {
margin: 0 0 1em;
}
h1 {
margin: 0 0 1.5em;
font-weight: 600;
font-size: 1.5em;
}
.accordion {
max-width: 65em;
}
.accordion p:last-child {
margin-bottom: 0;
}
<h1>BJCP Style 26. Trappist Ale</h1>
<section class="accordion">
<input type="checkbox" name="collapse" id="handle1" checked="checked">
<h2 class="handle">
<label for="handle1">26A. Trappist Single</label>
</h2>
<div class="content">
<p><strong>Overall Impression:</strong> A pale, bitter, highly attenuated and well carbonated Trappist ale, showing a fruity-spicy Trappist yeast character, a spicy-floral hop profile, and a soft, supportive grainy-sweet malt palate.</p>
<p><strong>History:</strong> While Trappist breweries have a tradition of brewing a lower-strength beer as a monk’s daily ration, the bitter, pale beer this style describes is a relatively modern invention reflecting current tastes. Westvleteren first
brewed theirs in 1999, but replaced older lower-gravity products.</p>
</div>
</section>
<section class="accordion">
<input type="checkbox" name="collapse2" id="handle2">
<h2 class="handle">
<label for="handle2">26B. Belgian Dubbel</label>
</h2>
<div class="content">
<p><strong>Overall Impression:</strong> A deep reddish-copper, moderately strong, malty, complex Trappist ale with rich malty flavors, dark or dried fruit esters, and light alcohol blended together in a malty presentation that still finishes fairly dry.</p>
<p><strong>History:</strong> Originated at monasteries in the Middle Ages, and was revived in the mid-1800s after the Napoleonic era.</p>
</div>
</section>
<section class="accordion">
<input type="checkbox" name="collapse2" id="handle3">
<h2 class="handle">
<label for="handle3">26C. Belgian Tripel</label>
</h2>
<div class="content">
<p><strong>Overall Impression:</strong> A pale, somewhat spicy, dry, strong Trappist ale with a pleasant rounded malt flavor and firm bitterness. Quite aromatic, with spicy, fruity, and light alcohol notes combining with the supportive clean malt character
to produce a surprisingly drinkable beverage considering the high alcohol level.</p>
<p><strong>History:</strong> Originally popularized by the Trappist monastery at Westmalle.</p>
</div>
</section>
更新:这就是现在的样子。我想将内容放在标题中,即我现在有文本“Belgian Tripel”的区域,但我也想在那里有内容。我想用 div 元素替换 span 元素。
解决方案
此功能是本机提供的,不需要 html 详细信息和摘要标记的 css。我只是使用这些,并在其中放入您想要的任何 html,然后应用您想要的任何 css。
<details>
<summary></summary>
<!-- windowshade content here -->
</details>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
推荐阅读
- rest - 如何在 POST Query 中使用 REST API 获取作者字段值
- jmeter - JMeter将响应保存到具有自定义扩展名的文件
- linux - 如何将“/”分隔符连接到字符串?
- excel - 运行时错误“438”:对象不支持此属性或方法
- javascript - 即使在 c 之后,Javascript 函数也会继续执行
- javascript - 将第三方 javascript 文件合并到 webpack 包中?
- ios - 根据设备大小圈出collectionview图像
- java - 我们可以在观察某物时调用另一种方法吗
- php - Laravel 5 PDF页脚与刀片显示空白
- vb.net - 与 LINQtoCSV 一起使用的空类 - vb.net