jQuery切换多个元素

Question

您好，我试图让在jQuery的多个元素一个切换，但它不工作的加号按钮时，单击不切换的元素，请帮助这里幻灯片的链接

的HTML

        <!-post  begin-- post 4 >
      <div class="col-xs-12 post-card">
        <div class="col-xs-3">

        </div>
        <div class="col-xs-7 post-start" >
         hello this is a test caption
        </div>
        <div class="col-xs-2">
          <button class="fa fa-plus plus-icon post-btn11" type="button">+</button>
        </div>

          <div  class="collapse col-xs-12" style="font-size: 16px; color:#646464;">
            <i class="fa fa-comments comment2"></i> <span>10 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
            10 likes</span>

          </div>
        </div>
        <!-post end for post 4-->

        <!-post  begin-- post 5 >
      <div class="col-xs-12 post-card">
        <div class="col-xs-3">

        </div>
        <div class="col-xs-7 post-start" >
         This is a test comment
        </div>
        <div class="col-xs-2">
          <button class="fa fa-plus plus-icon post-btn11" type="button" >+</button>
        </div>

          <div id="post-info" class="collapse col-xs-12" style="font-size: 16px; color:#646464;">
            <i class="fa fa-comments comment2"></i> <span>11 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
           13 likes</span>

          </div>
        </div>
        <!-post end for post 5-->

的CSS

.post-card {
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #eee;
  margin-top: 10px;
}
.fa {
  float: right;

}
.post.info {
  display: none;
} 

jQuery的

$(document).ready(function(){
$(".post-btn11").click(function(){
    $(this).siblings(".post-info").slideToggle();
});


});

Answer 1

完全错误的选择器post-info是一个id而不是class ，然后post-info不是post-btn11的兄弟姐妹，而是父级兄弟姐妹，因此选择器应如下所示：

$(".post-btn11").click(function(){
$(this).parent().siblings('#post-info').slideToggle();
});

但是最好使用class因为它应该重复而不是唯一。 也将此类添加到第一个。

$(".post-btn11").click(function(){
$(this).parent().siblings('.post-info').slideToggle();
});

JSFiddle

Answer 2

这是您的代码的更正。 我也更新了你的小提琴，所以去看看吧。 给您的post-info元素一个ID时遇到了问题。 在更正的版本中，我只需添加post-info作为类名。 .sublings()函数也将不起作用，因为您将其应用于按钮元素，并且在其中找不到任何嵌套元素。 因此，我需要先找到按钮的父元素，以与下一个post-info元素达到“相同的级别”，然后只需使用.next()函数

 $(document).ready(function(){ $(".post-btn11").click(function(){ $(this).parent(".col-xs-2").next(".post-info").slideToggle(); }); }); 

 .post-card { background-color: #f4f4f4; padding: 10px; border: 1px solid #eee; margin-top: 10px; } .fa { float: right; } .post.info { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-post end for post 3--> <!-post begin-- post 4 > <div class="col-xs-12 post-card"> <div class="col-xs-3"> </div> <div class="col-xs-7 post-start" > hello this is a test caption </div> <div class="col-xs-2"> <button class="fa fa-plus plus-icon post-btn11" type="button">+</button> </div> <div class="collapse col-xs-12 post-info" style="font-size: 16px; color:#646464;"> <i class="fa fa-comments comment2"></i> <span>10 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i> 10 likes</span> </div> </div> <!-post end for post 4--> <!-post begin-- post 5 > <div class="col-xs-12 post-card"> <div class="col-xs-3"> </div> <div class="col-xs-7 post-start" > This is a test comment </div> <div class="col-xs-2"> <button class="fa fa-plus plus-icon post-btn11" type="button" >+</button> </div> <div class="collapse col-xs-12 post-info" style="font-size: 16px; color:#646464;"> <i class="fa fa-comments comment2"></i> <span>11 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i> 13 likes</span> </div> </div> <!-post end for post 5-->