Javascript 如何在单击另一个div时隐藏一个div，使用JS或JQuery甚至bootstrap？

我有一个带有一串列的主容器div。 这些列中的每一列都有一个

data toggle=“collapse”

属性和一个特殊的id数据目标属性

接下来，我有6个单独的div容器，其中包含列和内容

我想一次显示一个div。单击一个div时，将隐藏上一个div

这就是我所做的，我唯一不确定的是如何隐藏中注释下方的内容div：

内容1
内容2
内容3
内容4
内容5
内容6
内容1
内容2
内容3
内容4
内容5
内容6
第1部分的内容
第二辑内容
第三辑内容
第4部分的内容
第五辑内容
第六辑内容

下面的示例帮助您解决问题

$（'.top'）。在（'click'，function（）上{
$parent_box=$（this）.closest（'.box'）；
$parent_box.sibbins（）.find（'.bottom'）.hide（）；
$parent_box.find（'.bottom'）.toggle（）；
});
.container.box{
浮动：左；
宽度：150px；
利润率：20px；
}
.容器.盒子.顶部{
填充：12px；
背景颜色：蓝色；
颜色：白色；
光标：指针；
}
.容器.盒子.底部{
填充：12px；
背景色：红色；
颜色：白色；
显示：无；
}

点击我
门#1
点击我
门#2
点击我
门#3
为此，您应该使用bootsrap accorbian，否则您必须首先手动隐藏所有内容div，然后使用jQuery显示当前目标div来处理它

此外，您的代码中的手风琴链接也有副本

下面是boostrap手风琴代码的样子：

<!--Content divs below-->
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-4" data-toggle="collapse"  data-
             target="#one">
            <h1>Content 1</h1>
        </div>
        <div class="col-sm-12 col-md-4" data-toggle="collapse"  data-
             target="#two">
            <h1>Content 2</h1>
        </div>
        <div class="col-sm-12 col-md-4" data-toggle="collapse"  data-
             target="#three">
            <h1>Content 3</h1>
        </div>
        <div class="col-sm-12 col-md-4" data-toggle="collapse"  data-
             target="#four">
            <h1>Content 4</h1>
        </div>
        <div class="col-sm-12 col-md-4" data-toggle="collapse"  data-
             target="#five">
            <h1>Content 5</h1>
        </div>

        <div class="col-sm-12 col-md-4" data-toggle="collapse"  data-                        
             target="#six">
            <h1>Content 6</h1>
        </div>
    </div>
</div>


<div class="accordion-group">

    <div class="container collapse" id="one">

        <div class="row">
            <div class="col-md-4">
                <h1>Content from div 1</h1>
            </div>

        </div>

    </div>

    <div class="container collapse" id="two">

        <div class="row">
            <div class="col-md-4">
                <h1>Content from div 2</h1>
            </div>

        </div>

    </div>


    <div class="container collapse" id="three">

        <div class="row">
            <div class="col-md-4">
                <h1>Content from div 3</h1>
            </div>

        </div>


    </div>


    <div class="container collapse" id="four">

        <div class="row">
            <div class="col-md-4">
                <h1>Content from div 4</h1>
            </div>

        </div>


    </div>


    <div class="container collapse" id="five">

        <div class="row">
            <div class="col-md-4">
                <h1>Content from div 5</h1>
            </div>

        </div>


    </div>



    <div class="container collapse" id="six">


        <div class="row">
            <div class="col-md-4">
                <h1>Content from div 6</h1>
            </div>

        </div>


    </div>
</div>


内容1
内容2
内容3
内容4
内容5
内容6
第1部分的内容
第二辑内容
第三辑内容
第4部分的内容
第五辑内容
第六辑内容