jQuery-給視覺設計師的語法教學-3-收合表格內容應用
此次教學會教學jQuery的 .siblings() 、.slideDown() 、 .slideUp() 、$(this)，此四種應用。
方法說明介紹
- .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 把部落格文章帶著走！
★wanchen畫的line貼圖
實用橘貓貼圖 Orange cat オレンジ ねこ→前往貼圖
★預訂門票行程推薦klook
★買藥妝必領 日本藥妝家電優惠
Amazon 日本亞馬遜 挖寶購物好好買
美國亞馬遜 Amazon 刴手勸敗
★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透
★機票預訂
skyscanner機票比價快速好用找便宜機票
★其他優惠
日本上網SIM卡日本實體SIM卡
klook
[…] jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3 […]