jQuery-給視覺設計師的語法教學-3-收合表格內容應用

  •  
  •  
  •  
  •  

此次教學會教學jQuery的 .siblings() 、.slideDown() 、 .slideUp() 、$(this),此四種應用。

Welcome to wanchen travel blog website : )
歡迎來到玩轉芋圓部落格網站,最新豐富的美食餐廳與飯店心得,讓你熟知旅行大小事,跟著玩轉芋圓旅遊去!

方法說明介紹

  • .siblings() = 尋找指定HTML的兄弟層級元素。
  • .slideDown() = 指定的HTML 顯示,並且使用向下展開動畫。
  • .slideUp() = 指定的HTML 隱藏不顯示,並且使用向上收合動畫。
  • $(this) = 表示是自己之意思。

範例預覽

試著操作以下CodePen的範例,點即”我是標題一”,即可以開啟相對應的內容表格,且會有收合的動畫。

HTML使用解析

我們先來講解一下這範例使用的HTML架構說明。

<ul>
  <li>
    <div class="title">我是標題一</div>
    <p>我是標題一的內容,我是標題一的內容,我是標題一的內容,我是標題一的內容。</p>
  </li>
  <li>
    <div class="title">我是標題二</div>
    <p>我是標題二的內容,我是標題二的內容,我是標題二的內容,我是標題三的內容。</p>
  </li>
  <li>
    <div class="title">我是標題三</div>
    <p>我是標題三的內容,我是標題三的內容,我是標題三的內容,我是標題三的內容。</p>
  </li>
  
</ul>

每一個區塊都是由li包起來,而每一個li裡面各有一個標題title跟相對應的內容p。而title跟p就是一個兄弟層級,所以會使用到jQuery的.siblings()。

解析CSS

* { box-sizing: border-box; }
ul { margin: 0 auto; width:80%; max-width:400px;}
ul li { padding:0; list-style: none; border:1px solid black;}
.title { padding:0 5px; font:20px/2 "微軟正黑體";color:#fff; background:#000;cursor: pointer; }
.title:hover { color:#fff720;}
p { display:none; padding:0 5px; font:14px/1.5 "微軟正黑體";color:#000; }

CSS的撰寫沒有一定規則,重要的就是要先將 內容的HTML先行隱藏,使用 display:none ,不顯示內容,會使用jQuery點擊相對應標題後才顯示。

解析jQuery

$(".title").click(function(){
  var x =  $(this).siblings("p")
    if( x.css("display") == "none"  ){
      x.slideDown(); 
    }else{
      x.slideUp();
    };
});

我們一句一句的解析語法內容說明

$(".title").click(function(){});

為標題 .title加上.click()方法,當.title被點擊後,執行 click()內的函式function(){};


var x =  $(this).siblings("p")

定義一個變數x,此x被定義為”被點擊的.title的兄弟階層p”。

$(this) 是自己的意思,範例中有三個.title,假如當第二個.title被點擊後,$(this)表示的就是第二個.title,依此類推。

此$(this)使用.siblings()方法,就可以尋找同階層的HTML。而在括號內寫上p,表示是要找同階層的p元素。


if( x.css("display") == "none"  ){}

假如x的CSS屬性display 等於none沒有顯示,則執行{ }內的動作。


x.slideDown(); 

原本隱藏的x物件,使用.slideDown()方法。往下滑動並且顯示出現。


if( x.css("display") == "none"  ){
//如果達成條件則執行這邊。
}else{
//如果條件不達成,則執行這邊。
}

因為我們也要製作,當內容已經被展開時,再次點擊標題後可以收合起已經被展開的內容。

因此我們的if會使用到else,else的意思就是,當條件沒有達成時,則執行else後的括弧。

所以當隱藏的按鈕如果沒有顯示,則會展開顯示,如果已經顯示了就會收合隱藏,形成收合的效果出現。


x.slideDown(); 

原本顯示的物件隱藏,並且使用向上卷隱藏的動畫。


完成!

以上教學完成,如果執行不成功,可以再次試著看看CodePen的範例喔!

玩轉芋圓讀者優惠專區

★喜歡玩轉芋圓旅遊手札嗎?歡迎下載APP 把部落格文章帶著走!

玩轉芋圓app

★信用卡推薦
台新Richart開戶優惠 限量健身包連結登記或輸入專屬代碼「PIXNET111」

★wanchen畫的line貼圖
實用橘貓貼圖 Orange cat オレンジ ねこ→前往貼圖

★預訂門票行程推薦klook

★買藥妝必領 2020日本藥妝家電優惠
松本清藥妝品項齊全藥妝店
日本札幌藥妝1萬日圓折500日圓、3萬日圓折2000日圓
唐吉訶德折價券滿額免稅享折扣
Japantaxi 「88DFB5」日本計程車折價券 ¥500jpy
Amazon 日本亞馬遜 挖寶購物好好買
BicCamera優惠券 日本家電電器折價券
樂天銀座優惠券 樂天免稅店折價券

★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透
relux 新用戶領取好友邀請9折優惠券
stay japan 預訂合法日本民宿
airbnb優惠 領1100旅遊金

★機票預訂
skyscanner機票比價快速好用找便宜機票

★其他優惠
日本電器家電優惠券 EDION免稅+93折優惠
餐廳訂位eztable 新會員優惠 抽紅包壽星優惠餐廳
Willer Travel預訂日本高速巴士車票
otomo travel日本導遊預約「MLKLX0PR」 折扣300元
GLOBAL WiFi上網分享器租借8折

★外送叫餐app/台北叫車
foodpanda外送優惠 輸入手機號碼領優惠
ubereats優惠「eats-7vh9sk」2次NT$100元折扣
uber優惠「wanchen120」首次搭乘uber省120


  •  
  •  
  •  
  •  

One thought on “jQuery-給視覺設計師的語法教學-3-收合表格內容應用

Add yours

發表迴響

Up ↑