javascript - 如何在单击另一个 div 时使用 JS 或 JQuery 甚至 Bootstrap 隐藏一个 div？

Question

我有一个带有一堆列的主容器 div。这些列中的每一列都有一个 data-toggle="collapse" 属性和一个特殊的 id 数据目标属性。

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

我希望一次显示一个 div。单击一个 div 时，前一个 div 会隐藏。

这就是我所做的，唯一我不确定的是如何隐藏评论下方的内容 div:

  

        <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>

      <!--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>

      <!--Content divs below-->

      <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>

Answer 1

下面的例子可以帮助你解决你的问题。

$('.top').on('click', function() {
	$parent_box = $(this).closest('.box');
	$parent_box.siblings().find('.bottom').hide();
	$parent_box.find('.bottom').toggle();
});

.container .box {
  float: left;
  width: 150px;
  margin: 20px;
}

.container .box .top {
  padding: 12px;
  background-color: blue;
  color: white;
  cursor: pointer;
}

.container .box .bottom {
  padding: 12px;
  background-color: red;
  color: white;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box">
    <div class="top">
      click me
    </div>
    <div class="bottom">
      door #1
    </div>
  </div>
  <div class="box">
    <div class="top">
      click me
    </div>
    <div class="bottom">
      door #2
    </div>
  </div>
  <div class="box">
    <div class="top">
      click me
    </div>
    <div class="bottom">
      door #3
    </div>
  </div>
</div>