【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;
     }
 }

​

【JQUARY】＄字號

1・Chrome原生就有＄字號

$("h1")

<h1>你好<h1/>


2・JQUARY 的＄字號

let a = $("h1")
let b =$("h1")

a===b 不同，表示記憶體不同（耗費效能）
每使用一次$字號時，JQ就會幫你製造一個物件

因此使用$記得宣告變數

3・querySelector

let a = document.querySelector("h1")
let b = document.querySelector("h1")

a===b 相同，指向的實體相同

【JQUARY】基本指令

基礎指令

$(“選擇器”).事件(a,b)

$("#title").html()   //不是innerHTML、innerText之類的，那是原始的JS

常見寫法

click事件

$("#title").click(function () {     //比較不直覺，而且不是所有事件都可以直接當function用
            console.log("hello")
        })


$("#title").on("click", function () {  //用on比較直覺，而且擴延性比較好
            console.log("hello")
        })

CSS和animate寫法

  $("#title").css("color", "red").css("margin-top", "120px")  //可以寫成鍊式
  $("#title").stop().animate({
            opacity: 0
        }, 1000)

​