手风琴效果

brand-ross.html

@@ -101,7 +101,7 @@
       <div class="therapy wrapper">
         <div class="container">
           <div class="title">关于疗法</div>
-          <div class="content">
+          <div class="content" id="therapy">
             <div class="item">
               <div class="cover">
                 <div class="tip">热透疗法</div>
@@ -437,6 +437,15 @@
       function onChangeAboutItemWithSwiper(index) {
         $('#aboutSwiepr').parent().siblings('.section').children('.item').hide().eq(index).show()
       }
+
+      // 关于疗法 手风琴效果
+      function therapyDemoAccordion() {
+        $('#therapy .item').on('mouseover', function (el) {
+          $('#therapy .hover').removeClass('hover')
+          $(this).addClass('hover')
+        })
+      }
+      therapyDemoAccordion()
     </script>
   </body>
 </html>

css/brand-ross.css

@@ -105,30 +105,43 @@
 .main .therapy .content {
   margin-top: 80px;
   height: 540px;
-  display: flex;
-  align-items: flex-start;
 }
 .main .therapy .content .item {
-  flex-shrink: 0;
+  float: left;
+  width: 180px;
   height: 100%;
+  position: relative;
+  overflow: hidden;
+  transition: width 0.4s;
+}
+.main .therapy .content .item.hover {
+  width: 480px;
 }
 .main .therapy .content .item.hover .cover {
-  display: none;
+  opacity: 0;
 }
 .main .therapy .content .item.hover .active {
-  display: block;
+  opacity: 1;
 }
 .main .therapy .content .item:first-child .cover {
   border-left: 0;
 }
+.main .therapy .content .item .cover,
+.main .therapy .content .item .active {
+  transition: opacity 0.4s;
+}
 .main .therapy .content .item .cover {
-  position: relative;
-  width: 180px;
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  width: 100%;
   height: 100%;
   box-sizing: border-box;
   border-left: 1px solid rgba(243, 146, 13, 0.2);
   background: linear-gradient(180deg, transparent 50%, rgba(243, 146, 13, 0.3) 100%);
   overflow: hidden;
+  opacity: 1;
 }
 .main .therapy .content .item .cover .tip {
   font-size: 16px;
@@ -152,8 +165,11 @@
   transform: translateX(-50%);
 }
 .main .therapy .content .item .active {
-  position: relative;
-  display: none;
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  opacity: 0;
   width: 480px;
   height: 100%;
   text-align: center;

css/brand-ross.scss

@@ -123,17 +123,21 @@
     .content {
       margin-top: 80px;
       height: 540px;
-      display: flex;
-      align-items: flex-start;
       .item {
-        flex-shrink: 0;
+        float: left;
+        width: 180px;
         height: 100%;
+        position: relative;
+        overflow: hidden;
+        transition: width 0.4s;
+
         &.hover {
+          width: 480px;
           .cover {
-            display: none;
+            opacity: 0;
           }
           .active {
-            display: block;
+            opacity: 1;
           }
         }
 
@@ -143,14 +147,23 @@
           }
         }
 
+        .cover,
+        .active {
+          transition: opacity 0.4s;
+        }
+
         .cover {
-          position: relative;
-          width: 180px;
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translateX(-50%);
+          width: 100%;
           height: 100%;
           box-sizing: border-box;
           border-left: 1px solid rgba(243, 146, 13, 0.2);
           background: linear-gradient(180deg, transparent 50%, rgba(243, 146, 13, 0.3) 100%);
           overflow: hidden;
+          opacity: 1;
 
           .tip {
             font-size: 16px;
@@ -178,8 +191,11 @@
         }
 
         .active {
-          position: relative;
-          display: none;
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translateX(-50%);
+          opacity: 0;
           width: 480px;
           height: 100%;
           text-align: center;