2015-09-06

【jQuery】顯示/隱藏 列表

常見問答列表，通常會列出各式問題，當滑鼠點擊該問題時，就會顯示出該問題的解答，再點擊一次，解答就收起來。

 
<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>
 


沒有留言:

張貼留言