实现简易手风琴样式

「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」

实现简易的手风琴样式

蓝桥最新一期的楼赛是实现手风琴样式，这个我们可以考虑到几个解决方案，我们先来看题

题目要求

题目要求我们的鼠标滑动或点击到某个盒子上后图片会被拉长，离开鼠标或者点击其他盒子后图片回复原来的样子，以达到手风琴样式效果，最后效果图如下所示

代码结构

1. html结构，官方给的html结构是这种通过两层嵌套的，并且以active和option来对样式进行控制

   <div class="options">
           <div class="option active" style="--optionBackground:url(../images/pic1.jpeg);" id="item1">
               <div class="shadow"></div>
           </div>
       </div>
   

实现方案

1. 整体逻辑：我们可以通过JQ的addClass和removeClass来对包含盒子进行一个样式的添加和移除，所以我们需要预先设置好我们对两种图片的样式，然后通过hover来实现鼠标的悬浮和离开配合add和remove来添加样式。

2. 冗余代码实现方法，因为我们的每一个盒子需要不同的id来控制每个盒子的悬浮事件，所以我们需要给四个盒子设置事件，所以这里就造成了极大的代码冗余，代码如下，我们需要四乘以现在的代码量来实现这个功能，所以我下面又提供了另一种写法

   $("#item1").hover(function () {//鼠标进入和离开事件
     $("#item1").addClass("active")
   }, function () {//离开就恢复初始样式
     $("#item1").removeClass("active")
   })
   

3. 简易代码实现方法，为了减少代码冗余的问题，所以采取了这种方案，即当鼠标点击盒子后我们通过对option的子类进行class的查找，找到后移除，移除后再通过e来进行点击后增加class，从而进一步实现功能

   $('.option').click(e=>{
     $('.options').find('.active').removeClass('active');
     $(e.target).addClass('active');
   })
   

总结

在开发中总会有这种代码冗余，这虽然是楼赛的一道web题，但是还是想一下如何减少冗余，使用轻便的代码来实现更好的功能，所以我们在做功能的时候可以考虑其他实现方案，比如说这里我们可以通过e来进点击绑定和class的添加，避免了我们通过id来绑定事件和添加class