jq实现手风琴效果

最新推荐文章于 2022-04-05 21:45:23 发布

weixin_40579792

最新推荐文章于 2022-04-05 21:45:23 发布

阅读量485

点赞数

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/weixin_40579792/article/details/79104572

版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用HTML和jQuery创建一个简单的折叠菜单效果。通过为每个菜单项添加点击事件，当用户点击菜单项时，可以切换其内容区域的显示状态。本文还提供了一个基本的样式设置以确保菜单的正常布局。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.11.3.js"></script>
    <style>
        body,ul,div,li{
            margin:0;
            padding: 0;
        }
        .ac{
            list-style: none;
            width: 200px;
            border:1px solid #333333;
        }
        .ac-item-hd{
            height: 50px;
            line-height: 50px;
            background: #fafaaf;
            text-align: center;
            cursor: pointer;
            border: 1px solid #aaaaaa;
        }
        .ac-item-hd:hover{
            background-color: transparent;
        }
        .ac-item-bd{
            height: 100px;
            display: none;
        }
        .on .ac-item-bd{
            display:block;
        }
    </style>
</head>
<body>
    <ul class="ac">
        <li class="ac-item on">
            <div class="ac-item-hd">头部</div>
            <div class="ac-item-bd">内容</div>
        </li>
        <li class="ac-item">
            <div class="ac-item-hd">头部</div>
            <div class="ac-item-bd">内容</div>
        </li>
        <li class="ac-item">
            <div class="ac-item-hd">头部</div>
            <div class="ac-item-bd">内容</div>
        </li>
        <li class="ac-item">
            <div class="ac-item-hd">头部</div>
            <div class="ac-item-bd">内容</div>
        </li>
    </ul>
    <script>
        $(".ac").on("click","li",function () {
            $(this).addClass("on").siblings().removeClass("on");
        })
    </script>
</body>
</html>