使用JavaScript实现可折叠元素默认指定项展开及代码逻辑讲解

现有JavaScript代码运行原理 #

• $(document).ready()：是jQuery提供的方法，会等待页面DOM结构完全加载完成后，再执行内部的代码，避免因为DOM未渲染完成导致元素获取失败的问题。
• 点击事件绑定：给所有.buy-info容器下的.tit标题元素绑定点击触发逻辑。
• $(this).toggleClass('active')：this指向当前被点击的.tit元素，toggleClass会切换元素的active类名：如果元素当前有这个类就移除，没有就添加，用来控制标题右侧箭头的样式切换。
• $(this).next('.con').slideToggle(300)：获取当前点击标题后面紧邻的.con内容元素，执行滑动切换动画，动画时长为300毫秒：如果内容当前是展开状态就向上滑动收起，如果是收起状态就向下滑动展开。

问题修复方案 #

你现在所有折叠项默认展开的原因有两个：

1. CSS中.con的默认隐藏属性display: none被注释了，导致所有内容默认显示
2. HTML中前3个.tit都加了active类，不符合你指定展开的需求

步骤1：修改CSS #

找到.buy-info .con样式，去掉display: none的注释：

.buy-info .con {
    display: none; /* 去掉注释，默认隐藏内容 */
    padding: 20px;
    font-size: 11px; line-height: 1.4;
}

步骤2：修改JavaScript #

添加初始化逻辑，让带active类的标题对应内容默认展开：

// expendable info
$(document).ready(function(){
    // 初始化：带active类的标题默认展开对应内容
    $('.buy-info .tit.active').next('.con').show();

    $('.buy-info .tit').click(function(){
        $(this).toggleClass('active');
        $(this).next('.con').slideToggle(300);
    });
});

步骤3：修改HTML #

调整.tit的active类，只给需要默认展开的第一个和最后一个标题加active：

<div class="buy-info">
    <div class="notice">NOTICE</div>
    <div class="tit active"> NOTICE 1</div> <!-- 第一个默认展开，保留active -->
    <div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="tit">NOTICE 2</div> <!-- 去掉active，默认折叠 -->
    <div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="tit">Notice3</div> <!-- 去掉active，默认折叠 -->
    <div class="con">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="tit active">Notice 4</div> <!-- 最后一个默认展开，添加active -->
    <div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

修改后即可实现第1、4个折叠项默认展开，第2、3个默认折叠，点击任意标题都可以切换展开/折叠状态。

内容的提问来源于stack exchange，提问作者David Jun