Bootstrap 3数据父级在按钮和目标不在一起时不起作用

Question

我正在尝试使用于折叠它们的按钮下面的可折叠元素（生物课）

我在这些按钮的下面还有一个三角形类，其作用方式应与我尝试将每个组包装在面板类中的常规手风琴相同，但即使对于三角形类也不起作用

折叠本身可以工作，但是不起作用的是我想在扩展另一个元素时隐藏所有其他扩展的元素，我猜应该使用data-parent，但是我无法使其正常工作。

 <div class = "container" id = "members" style="text-align:center;">
        <h1>THE TEAM</h1>
        <h3>MEMBERS</h3>
        <div class = "row">
            <div class = "col-md-3 panel">
                <input type="button" class= "circle" data-toggle="collapse" data-target="#triangle1,#bio1" data-parent="#members">
                <p>dr. sc. Name Lastname</p><div class="collapse" id="triangle1"><img src="Assets/myassets/triangle.png"/></div>
            </div>
            <div class = "col-md-3 panel">
                 <input type="button" class= "circle" data-toggle="collapse" data-target="#triangle2,#bio2" data-parent="#members">
                <p>dr. sc. Name Lastname</p><div class="collapse" id="triangle2"><img src="Assets/myassets/triangle.png"/></div>
            </div>
            <div class = "col-md-3 panel">
                <input type="button" class= "circle" data-toggle="collapse" data-target="#triangle3,#bio3" data-parent="#members">
                <p>dr. sc. Name Lastname</p><div class="collapse" id="triangle3"><img src="Assets/myassets/triangle.png"/></div>
            </div>
            <div class = "col-md-3 panel">
                <input type="button" class= "circle" data-toggle="collapse" data-target="#triangle4,#bio4" data-parent="#members">
                <p>dr. sc. Name Lastname</p><div class="collapse" id="triangle4"><img src="Assets/myassets/triangle.png"/></div>
            </div>  
        </div>


        <div class= "bio collapse" id="bio1">
            <div class = "container container-large">
                <div class = "row">
                    <div class = "col-md-9">
                        <h3>SHORT BIO</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam ipsum at sapien faucibus eleifend. 
                        Sed iaculis non orci eget suscipit. Etiam venenatis vitae neque vitae hendrerit.</p>
                    </div>
                    <div class = "col-md-3">
                        <h3>CONTACT</h3>
                        <a href = "#"><img src="Assets/myassets/fbandmail.png" style="margin-right: 15px;"/>name.lastname@mail.com</a>
                        <a href = "#"><img src="Assets/myassets/fbandmail2.png" style="margin-right: 15px;"/>fb.com/name.lastname</a>
                    </div>
                </div>
            </div>
        </div>

3个具有成功数字的相同生物div

我还将在所有这些代码下面再包含3个完全相同的代码，如果我在下面打开一个元素，可能还需要关闭这里的所有元素，但尚未确定

Answer 1

没关系; 我已成功使用此ansewr Bootstrap 3折叠手风琴：折叠所有作品，但在保持数据父级的同时无法展开所有作品

需要进行很多更改，但是从提供的文件开始，它可以很好地工作！