我正在处理我的一个项目，我正在尝试构建一个用户友好的响应式静态网页。对于当前页面，我在单击标签时仅使用CSS来扩展/折叠数据。它似乎没有工作，我知道我做了一些非常小的错误，但找不到它。任何帮助都会得到满足。
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}html{line-height:1}body{line-height:inherit}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* stylelint-enable */
section {
position: relative;
}
.main-content > ol {
display: flex;
justify-content: space-between;
}
.main-content > ol > li {
flex: 0 1 45%;
padding: 0;
}
input[type=checkbox] {
width: 100%;
height: 100%;
opacity: 0;
}
label {
cursor: pointer;
position: relative;
display: block;
padding-left: 30px;
}
label:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 10px;
border-left: 8px solid black;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
margin-top: -2px;
}
input[type=checkbox]:checked ~ h3 label:before {
border-left: 8px solid transparent;
border-top: 8px solid black;
border-right: 8px solid transparent;
margin-left: -4px;
margin-top: -4px;
}
li {
max-height: 0;
display: none;
padding-left: 30px;
transition: max-height 0.4s ease;
}
input[type=checkbox]:checked ~ h3 ~ li {
max-height: 200px;
} <main id="content">
<article class="content">
<h1>My Account</h1>
<section class="main-content">
<input type="checkbox" id="term-balance">
<h3><label for="term-balance">Current Term Balance</label></h3>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">Current Term Balance</li>
</ol>
</li>
<li class="content-title">
<ol class="title-content">
<li class="money-content">$0.00</li>
<li id="button-to-submit">
<input type="submit" name="submit" id="submit" value="Make a Payment" />
</li>
</ol>
</li>
</ol>
</section>
<section class="main-content">
<input type="checkbox" id="term-activity">
<h3><label for="term-activity">Current Term Account Activity</label></h3>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">TPBC Electronic Check Payment</li>
<li class="subprimary-content">03-MAR-2017</li>
</ol>
</li>
<li class="content-title">
<ol class="title-content">
<li class="money-content">$4,217.00</li>
</ol>
</li>
</ol>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">UG Direct Unsub Loan</li>
<li class="subprimary-content">03-MAR-2017</li>
</ol>
</li>
<li class="content-title">
<ol class="title-content">
<li class="money-content">$999.00</li>
</ol>
</li>
</ol>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">Federal Pell Grant</li>
<li class="subprimary-content">09-JAN-2017</li>
</ol>
</li>
<li class="content-title">
<ol class="title-content">
<li class="money-content">$2,342.00</li>
</ol>
</li>
</ol>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">Stem Scholarship</li>
<li class="subprimary-content">09-JAN-2017</li>
</ol>
</li>
<li class="content-title">
<ol class="title-content">
<li class="money-content">$3,000.00</li>
</ol>
</li>
</ol>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">Transfer Scholarship</li>
<li class="subprimary-content">09-JAN-2017</li>
</ol>
</li>
<li class="content-title">
<ol class="title-content">
<li class="money-content">$8,000.00</li>
</ol>
</li>
</ol>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">Graduaton Application Fee</li>
<li class="subprimary-content">08-JAN-2017</li>
</ol>
</li>
<li class="content-title">
<ol class="title-content">
<li class="money-content">$331.00</li>
</ol>
</li>
</ol>
</section>
<section class="main-content">
<input type="checkbox" id="total-loans">
<h3><label for="total-loans">Total Accepted Loans</label></h3>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">Spring 2017</li>
</ol>
</li>
</ol>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">UD Direct Sub Loan</li>
<li class="subprimary-content">UD Direct Unsub Loan</li>
</ol>
</li>
<li class="content-title">
<ol class="title-content">
<li class="money-content">$2,721.00</li>
<li class="money-content">$1,000.00</li>
</ol>
</li>
</ol>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">Fall 2016</li>
</ol>
</li>
</ol>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">UD Direct Sub Loan</li>
<li class="subprimary-content">UD Direct Unsub Loan</li>
</ol>
</li>
<li class="content-title">
<ol class="title-content">
<li class="money-content">$2,721.00</li>
<li class="money-content">$1,000.00</li>
</ol>
</li>
</ol>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">Spring 2016</li>
</ol>
</li>
</ol>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">UD Direct Sub Loan</li>
<li class="subprimary-content">UD Direct Unsub Loan</li>
<li class="subprimary-content">Direct Parent Loan</li>
</ol>
</li>
<li class="content-title">
<ol class="title-content">
<li class="money-content">$2,721.00</li>
<li class="money-content">$1,000.00</li>
<li class="money-content">$6,214.00</li>
</ol>
</li>
</ol>
<ol>
<li class="content-title">
<ol class="title-content">
<li class="subprimary-content">--------------------------------</li>
<li class="subprimary-content">Total Accepted Loans</li>
</ol>
</li>
<li class="content-title">
<ol class="title-content">
<li class="money-content">--------------</li>
<li class="money-content">$17,377.00</li>
</ol>
</li>
</ol>
</section>
答案 0 :(得分：0)
您似乎有2个问题阻止您的代码工作：
display: none隐藏元素，但忘记稍后再次显示。ol而不是li。以下是我在测试中使用的建议修补程序：
input[type=checkbox]~h3~ol {
max-height: 0;
display: none;
padding-left: 30px;
transition: max-height 0.4s ease;
overflow: hidden;
}
input[type=checkbox]:checked~h3~ol {
display: block;
max-height: 400px;
}
BTW我建议您使用ul代替ol：您的数据没有任何内在的排序，无论如何您都会压制数字。
此外，您使用checkbox是一个好主意，但您会发现它不适用于Legacy Browsers™。就个人而言，这并没有打扰我，但是在IE土地上遭受苦难的一些可怜的灵魂将不会看到它起作用。幸运的是，这不是很多。
答案 1 :(得分：0)
你必须在下面添加CSS，它会对你有用。
input[type=checkbox]:checked ~ h3 ~ ol li
{
display: block;
}