原理：同前一篇，不過使用的是sildeToggle方法。

具體思路：同前一篇。

具體實現程式碼：

JS檔案：

function showSort() {
	$("#sort").click(function() {
		$("#u_list3").stop().slideToggle(100);
	}, function() {
		$("#u_list3").stop().slideToggle(100);
	});
}

HTML/JSP檔案（JSP檔案）：

<div id="sort">
	排序
	<ul id="u_list3" style="display:none;">
		<li><a href="sort.do?op=id">ID</a></li>
<span style="white-space:pre">	</span>	<li><a href="sort.do?op=name">姓名</a></li>
		<li><a href="sort.do?op=salary">薪水</a></li>
		<li><a href="sort.do?op=age">年齡</a></li>
	</ul>
</div>
 

CSS檔案：

#sort {
    float: right;
    width: 100px;
    height: 56px;
    text-align: center;
    line-height: 56px;
    color: #ffffff;
    font-size: 20px;
    font-family: 微軟雅黑;
}

#sort:hover {
    cursor: pointer;
    background-color: #89bdd8;
}

#u_list3 {
    position: absolute;
    top: 55px;
    list-style: none;
    z-index: 999;
    border-left: 1px solid #89bdd8;
    border-bottom: 1px solid #89bdd8;
    background-color: #ffffff;
}

#u_list3 li a {
    display: block;
    width: 99px;
    border-top: 1px solid #89bdd8;
    color: #3bc0c3;
    font-family: 微軟雅黑;
    text-decoration: none;
}

#u_list3 li a:hover {
    background-color: #FEFFAA;
}