jQuery展开收缩 箭头
jQuery 是一个快速、简洁的 JavaScript 库，用于操作 HTML 文档，处理事件、执行动画以及简化 AJAX 操作。在 Web 开发中，我们常常需要实现一些交互效果，其中展开收缩的功能是很常见的。本文将介绍如何利用 jQuery 来实现展开收缩效果，并添加箭头指示展开状态。
准备工作
在开始编写代码之前，我们首先需要引入 jQuery 库。可以通过以下方式在 HTML 文档中引入：
<script src="
HTML 结构
为了演示展开收缩效果，我们需要在 HTML 中创建一个列表，其中每个列表项都可以展开或收缩。示例使用 <ul> 和 <li> 元素来创建列表。
<ul id="list">
<li>
<a rel="nofollow" href="#" class="toggle">Item 1</a>
<div class="content">Content 1</div>
</li>
<li>
<a rel="nofollow" href="#" class="toggle">Item 2</a>
<div class="content">Content 2</div>
</li>
<li>
<a rel="nofollow" href="#" class="toggle">Item 3</a>
<div class="content">Content 3</div>
</li>
</ul>
CSS 样式
为了使列表项能够正确地展开和收缩，我们需要为其添加一些 CSS 样式。以下是一个简单的示例样式：
.content {
display: none;
}
.active .content {
display: block;
}
.toggle::after {
content: " ▼";
}
.active .toggle::after {
content: " ▲";
}
在这个样式中，我们通过 display: none; 将内容区域隐藏起来，并通过 .active .content { display: block; } 当列表项处于展开状态时将其显示出来。通过添加 ::after 伪元素，我们在 <a> 标签后添加了一个箭头来指示展开或收缩状态。
JavaScript 代码
接下来，我们将编写 jQuery 代码来实现展开收缩功能。在代码中，我们将使用 .toggle() 方法来切换列表项的展开和收缩状态。
$(document).ready(function() {
$(".toggle").click(function(e) {
e.preventDefault();
$(this).parent().toggleClass("active");
});
});
在这段代码中，我们首先使用 $(document).ready() 方法来确保文档加载完成后再执行代码。然后，我们通过 .click() 方法为 .toggle 类的元素添加点击事件处理程序。在点击事件中，我们通过 e.preventDefault() 来阻止默认的链接跳转行为，并使用 $(this).parent().toggleClass("active") 来切换父元素的 active 类，从而实现展开和收缩的效果。
完整代码
以下是完整的 HTML、CSS 和 JavaScript 代码示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery展开收缩 箭头</title>
<style>
.content {
display: none;
}
.active .content {
display: block;
}
.toggle::after {
content: " ▼";
}
.active .toggle::after {
content: " ▲";
}
</style>
<script src="
<script>
$(document).ready(function() {
$(".toggle").click(function(e) {
e.preventDefault();
$(this).parent().toggleClass("active");
});
});
</script>
</head>
<body>
<ul id="list">
<li>
<a rel="nofollow" href="#" class="toggle">Item 1</a>
<div class="content">Content 1</div>
</li>
<li>
<a rel="nofollow" href="#" class="toggle">Item 2</a>
<div class="content">Content 2</div>
</li>
<li>
<a rel="nofollow" href="#" class="toggle">Item 3</a>
<div class="content">Content 3</div>
</li>
</ul>
</body>
</html>
