javascrip展开收缩 js展开收起效果

实现效果大概是多个卡片默认均隐藏详情部分，点击展开可查看该卡片详情，点击收起详情隐藏；同时只展开一个，即某个展开时其他的均收缩状态。

设计思路：
详情模块与展开按钮各设置两个样式类，即默认样式类与展开样式类。每个卡片默认样式类display：none，展开按钮默认样式不设置旋转角度。点击展开按钮后，通过js语句定位到使用展开类名的元素的位置，利用arrt方法将样式类名换为默认样式类，用同样的方法更改展开按钮的样式；将当前卡片及展开按钮的样式该改为展开样式类（通过设置按钮元素css-transform的旋转角度即可达到上图按钮效果）。

html代码

<div class="cards">
       <div class="card">
           <ul>
               <li class="card-li">
                   <span style="font-size: 24px">xxxxxxxxx工程师</span>
                       <span style="float: right">
                           <i class="glyphicon glyphicon-pushpin" style="color: red"></i>
                       </span>
               </li>
               <li class="card-li">
                   <span>
                       <i class="glyphicon glyphicon-align-left" style="color: cornflowerblue;"></i>
                       算法
                   </span>
                   <span style="float: right">
                       <i class="glyphicon glyphicon-hourglass" style="color: cornflowerblue;"></i>
                       2021-10-8
                   </span>
               </li>
               <li class="card-li">
                   <span>
                       <i class="glyphicon glyphicon-map-marker" aria-hidden="true" style="color: cornflowerblue"></i>
                       北京
                   </span>
               </li>
               <div id="hidden-content1" class="hidden-content">
                   <p style="margin: 1%; ">
                       <button style="font-size: 14px; border: 0; background: cornflowerblue; border-radius: 5px; color: white">
                           立即联系
                       </button>
                       <span style="font-size: 24px; float: right">
                           <i class="glyphicon glyphicon-heart-empty" onclick="collect()" style="color: red"></i>
                           <i class="glyphicon glyphicon-heart" onclick="collect()" style="color: red"></i>
                       </span>
                   </p>
                   <p>工作职责：</p>
                   <ol>
                      <li>test</li>
                   </ol>
                   <p style="margin-top: 1%">任职资格：</p>
                   <ol>
                      <li>test</li>
                   </ol>
               </div>
               <li id="unfold1" class="unfold">
                   <span>
                       <i class="glyphicon glyphicon-chevron-down" aria-hidden="true" style="font-size: 20px; color: dimgray"
                          onclick="unfold(1)"></i>
                   </span>
               </li>
           </ul>
       </div>
</div>

js代码：

function unfold (num) {
    const card = $("#hidden-content"+num);
    const unfold = $("#unfold"+num)
    // 结束其他card的展开状态
    card.parent().parent().siblings().children().children(".content").attr("class","hidden-content")
    card.parent().parent().siblings().children().children(".fold").attr("class","unfold")

    // 更改当前card的状态
    if (card.attr("class") === "content"){
        card.removeClass("content")
        card.addClass("hidden-content")
    }else{
        card.removeClass("hidden-content")
        card.addClass("content")
    }
    // 更改箭头的角度
    if (unfold.attr("class") === "fold"){
        unfold.removeClass("fold")
        unfold.addClass("unfold")
    }else{
        unfold.removeClass("unfold")
        unfold.addClass("fold")
    }
}

遇到的问题及解决办法
1、由于dom元素定位错误，导致无法结束其他卡片展开状态，误以为方法有问题，耽误多数时间。一定要定位准元素位置！！！

2、我用的图标是bootstrap图标库里面的，出现了一个问题，在滚动条往下滚动是卡片与其他置顶元素重合时图标会显示在顶层。看了下在其glyphicon样式类中有使用position: relative导致，只需要在本地css中将该样式类中的position值改为默认值即可（浏览器或优先加载本地样式类）。

3、详情卡片内容过多导致显示时高度过大，可以在样式里设置最大高度并设置overflow-y: auto，即可在超出最大高度时显示滚动条

---

以上是纯手写js实现的效果，js中也有相关的方法加以完善也可以实现类似效果，例如slideToggle、slideUp、slideDown等。