jquery实现：列表展开与收缩

最新推荐文章于 2024-07-18 18:32:44 发布

皮蛋瘦肉没有肉

最新推荐文章于 2024-07-18 18:32:44 发布

阅读量8.6k

点赞数 1

分类专栏： JavaScript 文章标签： html javascript css jquery 脚本

本文链接：https://blog.csdn.net/zzp961224/article/details/52145494

版权

本文通过示例代码介绍了如何利用jQuery实现列表的动态展开和收缩功能，涉及HTML、CSS和JavaScript的结合使用，确保在网页中能够交互地展示列表内容。

摘要由CSDN通过智能技术生成

话不多说，大家请看代码

先看html代码，以照相机为例子：

（别忘了引入jquery文件）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/layout.css" />
        <script src="js/jquery-3.1.0.js"></script>
		<script src="js/more.js"></script>
	</head>

	<body>
		<div class="SubCategoryBox">
			<ul>
				<li>
					<a href="#">佳能</a><i>(30440)</i></li>
				<li>
					<a href="#">尼康</a><i>(30440)</i></li>
				<li>
					<a href="#">三星</a><i>(30440)</i></li>
				<li>
					<a href="#">索尼</a><i>(30440)</i></li>
				&