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>