vue与jquery两种方式实现手风琴动效

1. jquery方式实现点击事件动效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jquery主页手风琴动效</title>
    <script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #171717;
      }
      .box {
        width: 1168px;
        height: 519px;
        background: red;
        margin: 50px auto;
      }

      .item {
        width: 119px;
        height: 519px;
        float: left;
        transition: width 0.2s;
      }

      .item:nth-child(1) {
        background: url("images/feature-1.png") no-repeat 100% 100%;
        /*background-size: 100% 100%; 背景图尺寸 */
      }

      .item:nth-child(2) {
        background: url("images/feature-2.png") no-repeat 100% 100%;
      }

      .item:nth-child(3) {
        background: url("images/feature-3.png") no-repeat 100% 100%;
      }

      .item:nth-child(4) {
        background: url("images/feature-4.png") no-repeat 100% 100%;
      }

      .item:nth-child(5) {
        background: url("images/feature-5.png") no-repeat 100% 100%;
      }

      .big {
        width: 692px;
      }

      .big img {
        display: none;
        height: 519px;
      }
    </style>
    <script type="text/javascript">
      $(function () {
        $(".item").click(function () {
          $(this).addClass("big").siblings().removeClass("big");
        });
      });
    </script>
  </head>
  <body>
    <div class="box">
      <div class="item big"><img src="images/01.png" alt="" /></div>
      <div class="item"><img src="images/02.png" alt="" /></div>
      <div class="item"><img src="images/03.png" alt="" /></div>
      <div class="item"><img src="images/04.png" alt="" /></div>
      <div class="item"><img src="images/05.png" alt="" /></div>
    </div>
  </body>
</html>

2. vue方式实现点击事件动效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue主页手风琴动效</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #171717;
      }
      .box {
        width: 1168px;
        height: 519px;
        background: red;
        margin: 50px auto;
      }

      .item {
        width: 119px;
        height: 519px;
        float: left;
        transition: width 0.2s;
      }

      .item:nth-child(1) {
        background: url("images/feature-1.png") no-repeat 100% 100%;
        /*background-size: 100% 100%; 背景图尺寸 */
      }

      .item:nth-child(2) {
        background: url("images/feature-2.png") no-repeat 100% 100%;
      }

      .item:nth-child(3) {
        background: url("images/feature-3.png") no-repeat 100% 100%;
      }

      .item:nth-child(4) {
        background: url("images/feature-4.png") no-repeat 100% 100%;
      }

      .item:nth-child(5) {
        background: url("images/feature-5.png") no-repeat 100% 100%;
      }

      .big {
        width: 692px;
      }

      .big img {
        display: none;
        height: 519px;
      }
    </style>
  </head>
  <body>
    <div id="container" class="box">
      <div
        v-for="(item, index) in imgList"
        :class="{
          item:true,
          big: selectIndex === index
        }"
        @click="selectIndex = index"
      >
        <img :src="item" alt="" />
      </div>
    </div>

    <script type="text/javascript">
      var vm = new Vue({
        el: "#container",
        data: {
          selectIndex: 0,
          imgList: [
            "images/01.png",
            "images/02.png",
            "images/03.png",
            "images/04.png",
            "images/05.png",
          ],
        },
      });
    </script>
  </body>
</html>