jQuery制作手风琴

最新推荐文章于 2024-07-25 09:24:40 发布

一个W牛

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量48

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_45587547/article/details/132712293

版权

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手风琴</title>
  <!-- 外部引入jquery.js文件，BootCDN里可以找到 -->
  <script src="./jquery.js"></script>
  <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;
    }
  </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>
        <h3>白玫瑰</h3>
        <div><img src="img/bg5.jpg"></div>
      </li>
    </ul>
  </div>
  <script>
    //点li，当前li的宽度变成434，里面的h3加个类名active，其余的li的宽度变成50，里面的li的类名移除
    $(function () {
      $(document).ready(function () {
        $('#acc li').click(function () {
          $(this).animate({ width: "434px" }, 800).find("h3").addClass("active").text('红玫瑰').end().siblings().animate({ width: "50px" }, 800).find("h3").removeClass("active").text('白玫瑰')
        })
      });
    })
  </script>
</body>
</html>