如何在單擊另一個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() { 
 
\t $parent_box = $(this).closest('.box'); 
 
\t $parent_box.siblings().find('.bottom').hide(); 
 
\t $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>

Answer 2

您應該使用bootsrap手風琴爲此否則必須使用手動第一隱藏所有內容div來自己處理，然後使用jQuery顯示當前目標股利。

此外，您的代碼中的手風琴鏈接也有重複。

這是自舉手風琴代碼將是什麼樣子：

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