原生js实现手风琴菜单效果与 css3的过渡实现手风琴效果

最新推荐文章于 2025-06-19 09:42:17 发布

lgdshr123

最新推荐文章于 2025-06-19 09:42:17 发布

阅读量6.1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lgdshr123/article/details/52997865

本文介绍了如何使用CSS3的过渡效果实现手风琴菜单，并探讨了使用原生JavaScript实现相同效果的过程。作者通过实践对比，发现原生JS实现相对复杂，希望能得到高手的指导。

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

最近学了css3的变形、过渡和动画，写了一个用css3手风琴菜单的效果，又想着用原生JavaScript来实现手风琴菜单效果。感觉挺有意思的，现在给大家分享一下。

1、css3实现手风琴效果

<style>
    *{
 
 margin: 0;padding: 0;list-style: none;}
    .box {
 
 width: 500px; background: #1c47ff;margin: 100px auto;}
    .box ul li h2{
 
 width: 500px;height: 35px;line-height: 35px;
        text-align: center;border: 1px solid #25fff5; }
    .box li:hover .txt{
 
 height: 300px;transition: all 1s;}
    .txt{
 
 overflow: hidden; height: 0;background:pink;}
</style>

<div class="box">
    <ul>
        <li>
            <h2>手风琴</h2>
            <div class="txt">内容1</div>
        </li>
        <li>
            <h2>手风琴</h2>
            <div class="txt">内容2</div>
        </li>
        <li>
            <h2>手风琴</h2>
            <div class="txt">内容3</div>