多折叠框交互异常求助：点击单个图标所有框同时展开

问题根源 #

你的JS代码里，点击.js-expand按钮时，用全局选择器$(".js-expand")和$(".figcaption")切换样式类，这会选中页面上所有匹配的元素，导致点一个按钮，所有折叠框同步展开/收起。

修复方案 #

1. 修改JavaScript代码 #

把全局选择改成仅操作当前点击按钮所在的那一组元素，用$(this)定位当前按钮，再通过DOM层级关系找到同容器下的目标元素：

$(".js-expand").click(function () {
    // 仅切换当前点击按钮的样式类
    $(this).toggleClass('is-expanded');
    // 找到当前按钮所在wrapper下的figcaption，切换它的样式类
    $(this).closest(".wrapper").find(".figcaption").toggleClass('is-expanded');
});

2. 修复HTML重复ID问题 #

HTML里两个折叠框都用了id="txtP4"，ID在页面中必须唯一，把第二个折叠框的ID改成txtP5，对应的data-target也要同步修改：

<!-- 第一个折叠框（保持不变） -->
<div class="form-control" data-toggle="collapse" data-target="#txtP4" contenteditable="false" disabled id="txtP4" style="background: #84BD00 !important; border: none;">

<!-- 第二个折叠框（修改ID和data-target） -->
<div class="form-control" data-toggle="collapse" data-target="#txtP5" contenteditable="false" disabled id="txtP5" style="background: #84BD00 !important; border: none;">

完整修复后代码 #

JavaScript #

$(".js-expand").click(function () {
    $(this).toggleClass('is-expanded');
    $(this).closest(".wrapper").find(".figcaption").toggleClass('is-expanded');
});

HTML（仅修改重复ID部分） #

<div class="col-lg-3 col-sm-3">
    <div class="form-group">
        <label class="bmd-label-floating">Primary Hazards</label>
        <div class="wrapper">
            <span class="figcaption-icon js-expand" title="Primary Hazards">&plus;</span>
            <figcaption class="figcaption">
                <div class="caption-title">Primary Hazards</div>
                <div class="caption-copy-wrap">
                    <div class="form-control" data-toggle="collapse" data-target="#txtP4" contenteditable="false" disabled id="txtP4" style="background: #84BD00 !important; border: none;">
                        <ul class="caption-copy">
                            <li>Unsafe working area</li>
                            <li>Personal Injury </li>
                            <li>Not conducting the joint site inspection </li>
                            <li>Expire receiver/ issuer certificate </li>
                            <li>EWrong equipment might be selected </li>
                            <li>Miss communication </li>
                        </ul>
                    </div>
                </div>
            </figcaption>
        </div>
    </div>
</div>

<div class="col-lg-3 col-sm-3">
    <div class="form-group">
        <label class="bmd-label-floating">Primary Hazards</label>
        <div class="wrapper">
            <span class="figcaption-icon js-expand" title="Primary Hazards">&plus;</span>
            <figcaption class="figcaption">
                <div class="caption-title">Primary Hazards</div>
                <div class="caption-copy-wrap">
                    <div class="form-control" data-toggle="collapse" data-target="#txtP5" contenteditable="false" disabled id="txtP5" style="background: #84BD00 !important; border: none;">
                        <ul class="caption-copy">
                            <li>Unsafe working area</li>
                            <li>Personal Injury </li>
                            <li>Not conducting the joint site inspection </li>
                            <li>Expire receiver/ issuer certificate </li>
                            <li>EWrong equipment might be selected </li>
                            <li>Miss communication </li>
                        </ul>
                    </div>
                </div>
            </figcaption>
        </div>
    </div>
</div>

CSS（无需修改） #

.wrapper {
    position: relative;
    width: 330px;
    top: 40%;
}

.figcaption {
    position: absolute;
    top: 50%;
    left: 1%;
    z-index: 4;
    background: #84BD00 !important;
    width: 30px;
    height: auto;
    max-height: 30px;
    border-radius: 50%;
    max-width: 220px;
    box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: 0.5s;
}

.figcaption:before {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    bottom: 99.5%;
    left: 0;
    content: '';
    z-index: 3;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #84BD00;
    overflow: hidden;
    transform: translateY(100%);
    transition: all 0.75s;
    transition-delay: 0.5s;
}

.figcaption.is-expanded {
    top: 50%;
    left: 1%;
    width: 300px;
    max-height: 1000px;
    border-radius: 0;
    max-width: 300px;
    box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.3);
    transition-delay: 0s;
}

.figcaption.is-expanded:before {
    left: 30px;
    transform: translateY(0%);
    transition-delay: 0s;
}

.figcaption-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 1%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    z-index: 5;
    color: #fff;
    transform: rotate(0deg);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: 0.5s;
}

.figcaption-icon.is-expanded {
    left: 80%;
    transform: rotate(405deg);
    transition-delay: 0s;
}

.caption-title {
    font-family: sans-serif;
    position: relative;
    background: #323232;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    padding: 5px 7.5px;
    margin-bottom: 10px;
    transform: translateX(-15px) translateY(10px);
    opacity: 0;
    white-space: nowrap;
    transition: all 0.5s;
    transition-delay: 0s;
}

.figcaption.is-expanded .caption-title {
    opacity: 1;
    white-space: nowrap;
    transition-delay: 0.5s;
}

.caption-copy-wrap {
    opacity: 0;
    overflow: hidden;
    max-height: 1000px;
    transition: all 0.5s;
    transition-delay: 0s;
    background: #84BD00 !important;
    border: none;
}

.figcaption.is-expanded .caption-copy-wrap {
    opacity: 1;
    white-space: normal;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: 0.5s;
}

.caption-copy {
    font-family: sans-serif;
    margin: 0;
    padding: 10px 20px 20px 20px;
    font-size: 0.875rem;
    line-height: 1.28571429;
    text-align: justify;
}

li {
    margin-bottom: 10px;
    color: black;
}

内容的提问来源于stack exchange，提问作者Wadiah Saleh