展開/摺疊文本不起作用

Question

我正在處理其中一個項目，並試圖構建一個用戶友好的響應式靜態網頁。對於當前頁面，我僅使用CSS在單擊標籤時展開/摺疊數據。它似乎沒有工作，我知道我做了一些非常小的錯誤，但找不到它。任何幫助將appriciated。

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>

Answer 1

你必須添加CSS以下，它會爲你工作。

input[type=checkbox]:checked ~ h3 ~ ol li 
{ 
display: block; 
} 

Answer 2

你似乎有2個問題，它阻止你的代碼工作：

• 你隱藏與display: none你的元素，但忘了後來再次顯示。
• 您的結構的性質表明您可能會從將CSS應用於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領域苦苦掙扎的可憐人將無法看到它的工作。幸運的是，這並不是很多。