jquery实现手拉风琴案例

最新推荐文章于 2022-11-06 15:34:29 发布

原创最新推荐文章于 2022-11-06 15:34:29 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

WEB前端同时被 3 个专栏收录

22 篇文章

订阅专栏

jQuery

19 篇文章

订阅专栏

项目

13 篇文章

订阅专栏

本文通过HTML、CSS和jQuery实现了一个手拉风琴效果的案例，详细讲解了各个部分的实现步骤和代码实现。

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

HTML

<ul>
    <li class="check">
        <span>标题一</span>
        <div>我是下拉的菜单</div>
    </li>
    <li>
        <span>标题二</span>
        <div>我是下拉的菜单</div>
    </li>
    <li>
        <span>标题三</span>
        <div>我是下拉的菜单</div>
    </li>
</ul>

CSS

*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
.clearfix:after,.clearfix:before{
    content: '';
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix:before{
    *zoom: 1;
}
ul{
    width: 200px;
    height: 500px;
    border: 1px solid #ccc;
}
ul li {
    width: 200px;
    height: 40px;
   overflow: hidden;
}
ul li .check{
    height: 340px;
}
ul li span{
    height: 40px;
    line-height: 30px;
    text-align: center;
    display: block;
    width: 200px;
    margin: 0 auto;
    background-color: blanchedalmond;
    border: 1px solid red;
    box-sizing: border-box;
}
ul li div{
    height: 300px;
    line-height: 300px;
    text-align: center;
    font-size: 20px;
}

jquery

<script src="jQuery/jquery-1.12.3.js"></script>
    <script>
        $(function () {
          $("ul li span").mouseenter(function () {
             $(this).parent().animate({height:340},500);
             $(this).parent().siblings().animate({height:30},500);
          });
        });
    </script>