6.4 練習

練習 1：簡易內容縮合

提供原始碼：

HTML

<ul class="list">
  
  <li>
    <a class="link_title" href="#">
      <button type="button" class="switch_btn">
        <span class="-plus">+</span><span class="-minus">-</span>
      </button>
      Q1. 如何加入會員？
    </a>
    <div class="inner_block">
      A1. 加入會員須經由書面方式加入會員須經由書面方式加入會員須經由書面方式加入會員須經由書面方式加入會員須經由書面方式
    </div>
      
  </li>
  
  <li>
    <a class="link_title" href="#">
      <button type="button" class="switch_btn">
        <span class="-plus">+</span><span class="-minus">-</span>
      </button>
      Q2. 如何加入會員？
    </a>
    <div class="inner_block">
      A2. 加入會員須經由書面方式加入會員須經由書面方式加入會員須經由書面方式加入會員須經由書面方式加入會員須經由書面方式
    </div>
      
  </li>
</ul>

CSS

* {
  box-sizing: border-box;
}
ul.list{
    margin: 24px 0 0 0;
    padding: 0;
    list-style: none;
}
ul.list > li{
  margin-bottom: 30px;
}

ul.list > li:last-child{
  margin-bottom: 0;
}

ul.list > li > a.link_title{
  display: block;
  width: 100%;
  color: white;
  background-color: #dd2836;
  box-shadow: 2px 2px 8px 0 rgba(56, 55, 53, 0.33);
  border-radius: 26px;
  padding: 8px 40px;
  text-decoration: none;
  font-size: 24px;
  font-weight: normal;
}

ul.list > li > a.link_title::after{
  content: "";
  display: block;
  clear: both;
}
            
ul.list > li > a.link_title button.switch_btn{
  float: right;
  display: inline-block;
  background: none;
  border: 0;
  outline: none;
  color: white;
  font-size: 24px;
}
            
ul.list > li > a.link_title button.switch_btn span.-minus{
  display: none;
}
ul.list > li > div.inner_block{
  font-size: 18px;
  color: #4a4a4a;
  margin-top: 8px;
  padding: 0 40px;
  line-height: 1.6;
  display: none;
}
ul.list > li.-on > a.link_title button.switch_btn span.-plus{
  display: none;
}
ul.list > li.-on > a.link_title button.switch_btn span.-minus{
  display: inline-block
}

執行方向：

• 在 a 標籤上點擊，該項的 li 標籤加上 -on 這個 class。a 標籤要停掉預設行為。

• 內容區域要展開、收合。

結果示意：( https://youtu.be/7fTac9g69lU )

參考作法：

練習 2：textarea 自動增加高度