<head>
<style>
// 這是讓滑鼠移至該問題時，滑鼠圖示會變成食指(點擊連結)
#options li
{
cursor:pointer;
}
// 預設讓解答隱藏
#options li ul
{
display: none;
}
</style>
<link rel="stylesheet" href="/jquery/jquery-ui.css">
<script src="/jquery/jquery-1.11.3.min.js"></script>
<script src="/jquery/jquery-ui.js"></script>
</head>
<body>
<ul id="options">
<li>
Q1：問題一<br />
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
</li>
<li>
Q2：問題二<br />
<ul>
<li>list 1</li>
<li>list 2</li>
</ul>
</li>
</ul>
<script>
// 注意這段程式碼務必寫在 <ul id="options"> 之後
// 不能寫在 <head> ... </head> 內
$("#options li").click(function()
{
$(this).find('ul').slideToggle('slow');
});
</script>
<body>
2015-09-06
【jQuery】顯示/隱藏 列表
常見問答列表，通常會列出各式問題，當滑鼠點擊該問題時，就會顯示出該問題的解答，再點擊一次，解答就收起來。
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言