点击鼠标切换图标，再次点击图标恢复

最新推荐文章于 2022-06-12 14:59:24 发布

黑洞不黑

最新推荐文章于 2022-06-12 14:59:24 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/heidongbuhei/article/details/84501757

html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用HTML、CSS和jQuery结合Font Awesome图标库，实现一个具有展开和收起功能的左侧菜单项。通过点击菜单项，可以切换箭头方向，实现菜单的动态效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../vendors/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="../vendors/JQuery/jquery-2.1.4.min.js"></script>
    <style>

        .left-menu-first{
            width:100px;
            height: 45px;
            background: #2b669a;
            color: white;
        }
    </style>
</head>
<body>
<div class="left-menu-first">
    <span>生产管理</span>
    <i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<script>
    $(".left-menu-first").on('click',function () {
        $(this).children(".fa").toggleClass("fa-angle-up");
        $(this).children(".fa").toggleClass("fa-angle-down")
    });
</script>
</body>

代码中的fa-angle-up和fa-angle-down是font-awesome自带的标签class名