jquery点击收缩加箭头

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。点击收缩加箭头通常是指在一个元素上点击时，该元素会展开或收缩，并且箭头的方向会相应改变。

类型

点击收缩加箭头的实现通常涉及以下几种类型：

展开/收缩内容：点击一个元素时，显示或隐藏其子元素。
箭头方向切换：根据元素的展开或收缩状态，改变箭头的方向。

应用场景

这种交互常见于导航菜单、折叠面板、工具提示等 UI 组件中。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 实现点击收缩加箭头的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Click Toggle</title>
    <style>
        .toggle-container {
            cursor: pointer;
        }
        .toggle-content {
            display: none;
        }
        .arrow-down::after {
            content: '▼';
        }
        .arrow-up::after {
            content: '▲';
        }
    </style>
</head>
<body>
    <div class="toggle-container arrow-down">
        Click me
        <div class="toggle-content">
            This is the content that will be shown or hidden.
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.toggle-container').click(function() {
                $(this).find('.toggle-content').slideToggle();
                $(this).toggleClass('arrow-down arrow-up');
            });
        });
    </script>
</body>
</html>