【Jquery】用slideToggle效果製作隱藏內容

▌效果

▌簡單原理

引入Jquery並使用slideToggle效果即可

▌html 範例模板

簡介：li（標題）+span（icon）+div（內容）的結構

 <div class="box_area">
  <ul>
  <li class="hiring-title" class="box_area_firstline">1.為什麼會有這麼奇怪的訂 閱系統？<span class="icon"></span></li>
 <div class="hiring-detail"> //內容的html  </div>
 <li class="hiring-title">2.為什麼是用ig推送<span class="icon"></span></li>
 <div class="hiring-detail"> //內容的html</div>
 <li class="hiring-title">3.為什麼是用ig推送<span class="icon"></span></li>
 <div class="hiring-detail"> //內容的html</div>
 </ul>
 </div class="box_area">

▌JS範例模板

• 記得要用ready不然會取不到
• 當被點擊時，就把next的hiring-detai div呼叫出來
• 當被點擊時，就把icon加上一個旋轉的class
• 原理說明：$(this).next(‘.hiring-detail’) 可以找到下一個符合.hiring-detail的dom
• 原理說明： $(this).find(‘.icon’).toggleClass(“transform-active”); 可以找到this子層中符合.icon的dom，並把它加上class

//呼叫QA效果
$(document).ready(function () {
    //隱藏要呼叫的div
    $('.hiring-detail').hide();

    //呼叫被隱藏的div
    $('.hiring-title').on('click', function () {
        $(this).next('.hiring-detail').slideToggle(400);
        $(this).find('.icon').toggleClass("transform-active");
        return false;
    })
});

▌CSS範例模板

.box_area {
     width: 85%;
     margin: 0 auto;
     .box_area_firstline {
         border-top: 2px solid black;
     }

     ul li {
         padding: 10px;
         list-style-type: none;
         border-bottom: 2px solid black;
         &:hover {
             color: #9e1134;
         }

         .icon {
             float: right;
             vertical-align: middle;
             &::before {
                 content: "+";
                 font-size: 20px;
             }
         }

         .transform-active {
             transform: rotate(45deg)
         }
     }

     .hiring-detail {
         margin: 0px;
         width: 100%;
         background-color: #eeeeee;
         padding: 10px;
         padding-left: 30px;
     }
 }

​