【代码笔记】HTML+CSS+JAVAScript+jQuery点击图标下滑列表

最新推荐文章于 2023-08-01 16:06:54 发布

原创

最新推荐文章于 2023-08-01 16:06:54 发布 · 876 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #动画 #下滑列表 #jquery #函数

这篇博客介绍了如何利用HTML、CSS、JavaScript和jQuery实现点击图标后列表下滑的动画效果，主要使用了slideToggle函数来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：同前一篇，不过使用的是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-siz

最低0.47元/天解锁文章

200万优质内容无限畅学