首页 文章

Bootstrap 3数据 - 父级不在按钮和目标时工作,当它们不在一起时

提问于
浏览
0

我正在尝试制作可折叠元素,这些元素位于用于折叠它们的按钮下方(生物类)

我在这些按钮下方也有一个三角形类,它应该像我在面板类中尝试包装每个组的常规手风琴一样,但它甚至对于三角形类也不起作用

折叠本身是有效的,但是什么不起作用是我想在扩展另一个元素时隐藏所有其他扩展元素,我猜数据 - 父应该是为了这个,但我不能让它工作 .

<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个完全相同的代码,如果我在下面打开一个元素,我可能需要关闭所有元素,这还没有确定

1 回答

相关问题