jQuery Collapse - 點擊標題後可展開或關閉內容
~程式段~
<ｈｅａｄ id="Head1" runat="server">
<ｓｃｒｉｐｔ type="text/javascript">
$(function()
{
$(".pp").click(function(event)
{
event.preventDefault();//取消預設事件
$(this).next("div").slideToggle(100);//通過高度變化來切換所有匹配元素的可見性，並在切換完成後可選地觸發一個回調函數。
//$("#caja").slideDown();//通過高度變化（向下增大）
//slideToggle(speed,callback)
//這裡的 speed (String|Number): (可選) 三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
});
$("#mostrar2").click(function(event)
{
event.preventDefault();//取消預設事件
$("#caja2").slideToggle(1);//通過高度變化來切換所有匹配元素的可見性，並在切換完成後可選地觸發一個回調函數。
//$("#caja").slideDown();//通過高度變化（向下增大）
//slideToggle(speed,callback)
//這裡的 speed (String|Number): (可選) 三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
});
$("#caja a").click(function(event)
{
event.preventDefault();//取消預設事件
$("#caja").slideUp("fast",function(){alert("bye bye！")});// 通過高度變化（向上減小）
});
$("#caja2 a").click(function(event)
{
event.preventDefault();//取消預設事件
$("#caja2").slideUp("fast",function(){alert("bye bye2！")});// 通過高度變化（向上減小）
});
$("#webA").click(function(event)
{
event.preventDefault();//取消預設事件
alert("大家好！！！");
});
});
//使用的css
<ｓｔｙｌｅ type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
}
a{color:#993300; text-decoration:blink;}
#caja {
width:70%;
display: none;
padding:5px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
a2{color:#993300; text-decoration:blink;}
#caja2 {
width:70%;
display: none;
padding:5px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
#mostrar{
display:block;
width:70%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;
}
#mostrar2{
display:block;
width:70%;
padding:5px;
border:2px solid #00AA66;
background-color:#66DD78;
}
<／ｓｔｙｌｅ>
<ｂｏｄｙ>
<ｆｏｒｍ id="form1" runat="server">
<ａｓｐ:Repeater ID="Repeater1" runat="server" DataSourceID="XmlDataSource1"><ＩｔｅｍＴｅｍｐｌａｔｅ>
<ａ href="#" id="mostrar" class="pp">Jolin護舊愛 信周董不沾賭
<ｄｉｖ id="caja" >
<ａhref="#" class="close">[x]<ａｓｐ:Label ID="Label1" runat="server" Text='<%#Eval("id") %>'>
<ａｓｐ:Button ID="Button1" runat="server" Text="Button" />
<ｉｎｐｕｔ id="Button2" type="button" value="button" />「Jolin」蔡依林昨天為新專輯辦慶功，對於舊愛「周董」周杰倫近來被爆泡賭場狂輸上億台幣，
Jolin為他澄清：「應該不可能吧，有點誇張。」至於她與眾追求者進展得如何，是否交換了MSN帳號？
她則笑著反問：「這很重要嗎？拒絕回答。」等同間接認了已經有人擁有她的帳號，彼此已邁入網交階段。
慶30歲 申請1週生日假Jolin最近為新專輯連續工作4個月，又喊著想放長假，但她也知一切是「肖想」：
「年底要辦演唱會，要放也是明年。」因此9月中乾脆藉生日名義，向公司申請1週假期，「畢竟是20歲嘛
（實際為30歲），一定要慶祝。」
今年希望追求者送鑽戒嗎？Jolin則說：「我自己買得起。」她坦言價錢不是重點，重要的是送的人。
教折手舞 大嘴巴40哀嚎Jolin之前上CHANNEL[V]「音樂這個讚」，教大嘴巴40跳voguing舞，40勾不到
手痛到哀哀叫，「好痛！這樣超像在復健的。」Jolin還淘氣上前拉他一把，讓已經滿頭大汗的40叫得
更大聲，趁廣告空檔藉機尿遁。<／ｐ>
<／ｄｉｖ>
<／ＩｔｅｍＴｅｍｐｌａｔｅ><／ａｓｐ:Repeater>
<ａ href="#" id="mostrar2">「非A型性格」求職最吃香<／ａ>
<ｄｉｖ id="caja2">
<ａ href="#" class="close">[x]<／ａ>
<ｐ>經歷跳樓事件後，富士康重新招募員工，招考試題中，出現了有關抗壓特質的測試，例如「周圍有喧嚷聲，能不能馬上睡？」
從題目看來，富士康想要測試，這些面試者對於一般人不太在意的事，是否也會產生激烈的壓力反應？也就是說，富士康很可能
要找的是心理學中「非A型性格」的人。
一九六○年代，兩位心臟科醫師費立德曼與羅森曼定義了「A型性格」的特性，他們發現容易罹患心血管疾病的人，通常具有一套
共同的特質：傾向於工作狂熱、全力以赴，重視做事完美無缺，好競爭且懷有敵意，卻又害怕失敗。
之後，心理學家研究發現，具有「A型性格」的特質，容易感受到壓力，如果他們感覺事情不在自己掌控之中，便會過分投入工作，
時時刻刻都保持警戒，血壓也居高不下。
反之，「非A型性格」即使在高壓的環境中，仍能不慌不忙、隨和易處，也沒有爭強好勝的壓力，在緊張之後，還能愉快的休息。
也就是說，富士康希望新進的員工，他們的心理素質天生就比較能抗壓，即俗話說的「神經比較大條」，如此，當面對治軍嚴謹、
一絲不苟、處處要找出細節裡的魔鬼富士康主管時，才承受得了。
抗壓風並不是只有大陸，回頭看台灣，企業主面對突如其來的變化壓力，也有員工執著於求好心切而自殺，所以在人才募集，同樣
有偏愛抗壓能力高者的趨勢。
台灣的鴻海，徵才條件更早即趨向「高抗壓」。在富士康尚未發生跳樓事件前，鴻海宣稱，今年將有許多新計畫持續拓展，人才需
求很大，希望找到抗壓性好「打不走、罵不退」的青年才俊。
不只鴻海，近來新奇美、廣達、宏碁、英業達等科技大廠開出的徵才條件，不約而同，都把「抗壓性佳」列為必備資格。今年台積
電徵才也突出了「抗壓力」這個主題，「台灣學生聰明程度不輸國外，但是抗壓明顯較弱。」台積電人力資源經理魏烈說，公司裡
曾有博士提出想法時被多問幾句就失去自信；也有新人看到同事被責備，便難過起來，抗壓性不足。
因此台積電的用人政策，除了看一般的IQ（智力商數）、EQ（情緒商數）外，更重視求職者的AQ（逆境商數），因為高科技業不斷
追求技術領先，工作承受很大的壓力，逆境商數高者，才能面對劇烈變化。<／ｐ>
<／ｄｉｖ>
<ｐ><／ｐ>
<ａ href="Default.aspx" id="webA">回首頁<／ａ>
<ａｓｐ:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/XMLFile.xml">
~註解~
$(".pp") //抓取class=pp的資料
$(this).next("div") //抓取下一層資料中div元件
$("#mostrar2") //抓取id=mostrar2的資料
~範例~
http://140.96.149.85/JQuery/WebJQuery.aspx
發表文章
