jQuery案例：手风琴效果实现示例

最新推荐文章于 2022-11-20 20:53:52 发布

你的玄烨

最新推荐文章于 2022-11-20 20:53:52 发布

阅读量377

点赞数

分类专栏： jQuery 文章标签： jquery 前端

本文链接：https://blog.csdn.net/CCQStudy/article/details/106731678

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言：我使用的是jQuery版本是jquery-1.11.3.js

寄语：没有太多的代码，也没有太复杂的逻辑。只是想用简单的案例熟悉jQuery的应用。

页面主要逻辑：鼠标移入当前li区域，改变当前li的宽度，同时其兄弟li长度缩短收起来。

页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        img {
            border: none;
            display: block;
        }
        #acc {
            width: 640px;
            height: 140px;
            margin: 0 auto;
        }
        #acc ul {
            border-left: 1px solid #ddd;
            height: 140px;
            position: relative;
        }
        #acc ul li {
            width: 50px;
            height: 138px;
            border: 1px solid #ddd;
            float: left;
            list-style: none;
            border-left: 0;
            position: relative;
            overflow: hidden;
        }
        #acc ul li.active {
            width: 434px;
        }
        #acc ul li h3 {
            font-size: 14px;
            color: #000;
            font-weight: 100;
            width: 14px;
            height: 98px;
            padding: 40px 18px 0;
        }
        #acc ul li h3.active {
            background: #f42760;
            color: #fff;
        }
        #acc ul li div {
            width: 383px;
            height: 138px;
            background: blue;
            position: absolute;
            top: 0;
            left: 50px;
            border-left: 1px solid #ddd;
            z-index: 0;
        }
        #acc ul li img {
            width: 383px;
            height: 138px;
        }
        #acc ul li.last {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div id="acc">
        <ul>
            <li class="active">
                <h3 class="active">红玫瑰</h3>
                <div><img src="img/bg1.jpg" /></div>
            </li>
            <li>
                <h3>白玫瑰</h3>
                <div><img src="img/bg2.jpg" /></div>
            </li>
            <li>
                <h3>白玫瑰</h3>
                <div><img src="img/bg3.jpg" /></div>
            </li>
            <li>
                <h3>白玫瑰</h3>
                <div><img src="img/bg4.jpg" /></div>
            </li>
            <li class="last">
                <h3>白玫瑰</h3>
                <div><img src="img/bg5.jpg" /></div>
            </li>
        </ul>
    </div>
    <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

逻辑实现：

<script>
        $(function(){
            //鼠标移到当前li上，当前li的宽度变成434px，li里的h3
            //要添加一个类名active，让背景变红色，文字变白
            $("#acc")
               .find("li")
               .mousemove(function(){
                   //stop:定时器先清再用
                   $(this)
                   .stop()
                   .animate({width:"434px"},800)
                   .children("h3")
                   .addClass("active")
                   //end():返回上一个事件对象
                   .end()
                   //当前li的所有兄弟li宽度调为50px
                   //也移除它们子节点中h3的active类名
                   .siblings()
                   .stop()
                   .animate({width:"50px"},800)
                   .children("h3")
                   .removeClass("active")
               })
        })
    </script>