Javascript 引导数据目标面板是否在数据父嵌套外部关闭？

我在第8列列出了面板部分的复选框列表，然后在右侧列出了该特定面板部分的第4列信息列表

我决定使用

data parent

一次打开一个面板，这样我就可以做到这一点

在同一个面板触发器元素中，我定义了两个数据目标。ex

设计


屏蔽门
你有自己的photoshop模型


习俗
你想让我们想出一个设计概念


加成


屏蔽门
你有自己的photoshop模型。。。


习俗
你想让我们想出一个概念。。。


描述设计过程

描述标记过程


是否有一种纯粹的引导方法来处理此问题，或者我需要创建一个自定义方法？
而不是使用id来标识元素，您应该尝试使用相同的类执行此操作：

HTML代码（我为data target=“.collapseDesign”更改了data target=“.collapseDesign”的data target=“#design，#collapseDesign”，并将该类添加到您想要关闭的元素中）


设计


屏蔽门
你有自己的photoshop模型


习俗
你想让我们想出一个设计概念


加成


屏蔽门
你有自己的photoshop模型。。。


习俗
你想让我们想出一个概念。。。


描述设计过程

描述标记过程


但是，我不知道为什么在第二种情况下，bootstrap工作得很好。
感谢您的努力，但它仍然可以做同样的事情。首先尝试单击“标记”，您将看到右侧有两个打开的信息项。
<div class="col-xs-8">
    <div class="panel-group" id="accordion">
        <div class="panel"> <a data-toggle="collapse" data-parent="#accordion" data-target="#design,#collapseDesign">
                      <div class="panel-heading">
                        <h4 class="panel-title">Design</h4>
                        <i class="ti-arrow-circle-down"></i>
                      </div>
                    </a>

            <div id="collapseDesign" class="panel-collapse collapse in">
                <div class="panel-body">
                    <ul>
                        <li>
                            <div class="checkbox">
                                <input type="checkbox" id="c1" name="Order[psd]" />
                                <label for="c1"> <span class="box"><span class="typcn typcn-tick"></span></span>
                                    <div style="display: inline-block; color: #000">PSD</div>
                                    <div class="psd-service-tip" style="display: inline-block; color: #64687b;font-size: 12px;float: right;margin-top: 2px;margin-left: 25px;"><span data-toggle="tooltip" data-placement="right" title="Do you have a PSD file that you would like to be converted into code?" class="ti-more-alt"></span>

                                    </div>
                                    <div class="psd-service-desc" style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You have your own photoshop mockup</div>
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="checkbox">
                                <input type="checkbox" id="c2" name="cc" />
                                <label for="c2"> <span class="box"><span class="typcn typcn-tick"></span></span>
                                    <div style="display: inline-block; color: #000">Custom</div>
                                    <div class="psd-service-tip" style="display: inline-block; color: #64687b;font-size: 12px;float: right;margin-top: 2px;margin-left: 25px;"><span data-toggle="tooltip" data-placement="right" title="Let us handle your design, we will submit mockups, this option will cost more." class="ti-more-alt"></span>

                                    </div>
                                    <div class="custom-service-desc" style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You want us to come up with a design concept</div>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="panel"> <a data-toggle="collapse" data-parent="#accordion" data-target="#demo,#collapseOne">
                      <div class="panel-heading">
                        <h4 class="panel-title">Markup</h4>
                        <i class="ti-arrow-circle-down"></i>
                      </div>
                    </a>

            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <ul>
                        <li>
                            <div class="checkbox">
                                <input type="checkbox" id="c1" name="cc" />
                                <label for="c1"> <span class="box"><span class="typcn typcn-tick"></span></span>
                                    <div style="display: inline-block; color: #000">PSD</div>
                                    <div style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You have your own photoshop mockup...</div>
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="checkbox">
                                <input type="checkbox" id="c2" name="cc" />
                                <label for="c2"> <span class="box"><span class="typcn typcn-tick"></span></span>
                                    <div style="display: inline-block; color: #000">Custom</div>
                                    <div style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You want us to come up with a concept...</div>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-xs-4">
    <div class="info-preferences">
        <div id="design" class="collapse in">
            <p>Describe the design process</p>
        </div>
        <div id="demo" class="collapse">
            <p>Describe the markup process</p>
        </div>
    </div>
</div>

<div class="col-xs-8">
    <div class="panel-group" id="accordion">
        <div class="panel"> <a data-toggle="collapse" data-parent="#accordion" data-target=".collapseDesign">
                      <div class="panel-heading">
                        <h4 class="panel-title">Design</h4>
                        <i class="ti-arrow-circle-down"></i>
                      </div>
                    </a>

            <div class="panel-collapse collapse in collapseDesign">
                <div class="panel-body">
                    <ul>
                        <li>
                            <div class="checkbox">
                                <input type="checkbox" id="c1" name="Order[psd]" />
                                <label for="c1"> <span class="box"><span class="typcn typcn-tick"></span></span>
                                    <div style="display: inline-block; color: #000">PSD</div>
                                    <div class="psd-service-tip" style="display: inline-block; color: #64687b;font-size: 12px;float: right;margin-top: 2px;margin-left: 25px;"><span data-toggle="tooltip" data-placement="right" title="Do you have a PSD file that you would like to be converted into code?" class="ti-more-alt"></span>

                                    </div>
                                    <div class="psd-service-desc" style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You have your own photoshop mockup</div>
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="checkbox">
                                <input type="checkbox" id="c2" name="cc" />
                                <label for="c2"> <span class="box"><span class="typcn typcn-tick"></span></span>
                                    <div style="display: inline-block; color: #000">Custom</div>
                                    <div class="psd-service-tip" style="display: inline-block; color: #64687b;font-size: 12px;float: right;margin-top: 2px;margin-left: 25px;"><span data-toggle="tooltip" data-placement="right" title="Let us handle your design, we will submit mockups, this option will cost more." class="ti-more-alt"></span>

                                    </div>
                                    <div class="custom-service-desc" style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You want us to come up with a design concept</div>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="panel"> <a data-toggle="collapse" data-parent="#accordion" data-target="#demo,#collapseOne">
                      <div class="panel-heading">
                        <h4 class="panel-title">Markup</h4>
                        <i class="ti-arrow-circle-down"></i>
                      </div>
                    </a>

            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <ul>
                        <li>
                            <div class="checkbox">
                                <input type="checkbox" id="c1" name="cc" />
                                <label for="c1"> <span class="box"><span class="typcn typcn-tick"></span></span>
                                    <div style="display: inline-block; color: #000">PSD</div>
                                    <div style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You have your own photoshop mockup...</div>
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="checkbox">
                                <input type="checkbox" id="c2" name="cc" />
                                <label for="c2"> <span class="box"><span class="typcn typcn-tick"></span></span>
                                    <div style="display: inline-block; color: #000">Custom</div>
                                    <div style="display: inline-block; color: #64687b;font-size: 12px;float: right;">You want us to come up with a concept...</div>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-xs-4">
    <div class="info-preferences">
        <div class="collapse in collapseDesign">
            <p>Describe the design process</p>
        </div>
        <div id="demo" class="collapse">
            <p>Describe the markup process</p>
        </div>
    </div>
</div>