Slidingown元素和slideUp其他

Question

我知道有很多這樣的主題，但我沒有找到正確的答案。

當文檔被加載時，我想我的所有塊都關閉（slideUp）。

當用戶點擊一個塊時，文本向下滑動同胞其他人打開塊（所以如果打開，它會關閉其他塊）。

我有這個，但它的工作只有兩個街區：

<div class="col-xs-12 wrap-blocks-concours"> 
      <div class="col-xs-12 blocks-concours"> 

       <div class="col-xs-8"> 
        <img src="#" alt="Nicolas et Mathieu"> 
       </div> 

       <div class="bandeau-nom-concours"> 
        <h3 class="uppercase">Nicolas et Mathieu</h3> 
       </div> 

       <div class="col-xs-4 text-block selected"> 
        <h5 class="uppercase">Content</h5> 
       </div> 
      </div> 

      <div class="col-xs-12 text-slide"> 
       <h3>Content</h3> 
      </div> 
     </div> 

而且我的Jquery：

(function($) { 
     $(document).ready(function() { 
      $('.blocks-concours').click(function() { 
       var currentContent = $(this).siblings('.text-slide'); 
       $('.text-slide').not(currentContent).slideUp(); 
       currentContent.slideToggle().sibling($('.text-slide')); 
      }); 
     }); 
    })(jQuery); 

而且，我有我的text-slide

一個display: none怎麼可能我儘可能簡單地做到這一點？

Answer 1

你太親近了！您使用sibling而不是siblings一次。我只是刪除了那部分，因爲它沒有做任何事情。

$(document).ready(function() { 
 
    $('.blocks-concours').click(function() { 
 
     var currentContent = $(this).siblings('.text-slide'); 
 
     $('.text-slide').not(currentContent).slideUp(); 
 
     currentContent.slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-12 wrap-blocks-concours"> 
 
      <div class="col-xs-12 blocks-concours"> 
 

 
       <div class="col-xs-8"> 
 
        <img src="#" alt="Nicolas et Mathieu"> 
 
       </div> 
 

 
       <div class="bandeau-nom-concours"> 
 
        <h3 class="uppercase">Nicolas et Mathieu</h3> 
 
       </div> 
 

 
       <div class="col-xs-4 text-block selected"> 
 
        <h5 class="uppercase">Content</h5> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-xs-12 text-slide"> 
 
       <h3>Content</h3> 
 
      </div> 
 
     </div>