[英]jQuery toggle for multiple elements
Hello I am trying to make a toggle for multiple elements in jQuery but it not working the plus button when click does not slide toggle the element please help here is the link 您好,我试图让在jQuery的多个元素一个切换,但它不工作的加号按钮时,单击不切换的元素,请帮助这里幻灯片的链接
HTML 的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 的CSS
.post-card {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #eee;
margin-top: 10px;
}
.fa {
float: right;
}
.post.info {
display: none;
}
jQuery jQuery的
$(document).ready(function(){
$(".post-btn11").click(function(){
$(this).siblings(".post-info").slideToggle();
});
});
Totally wrong selector post-info
is an id
not a class
, then post-info
not siblings of post-btn11
but it's parent siblings, so the selector should like this: 完全错误的选择器
post-info
是一个id
而不是class
,然后post-info
不是post-btn11
的兄弟姐妹,而是父级兄弟姐妹,因此选择器应如下所示:
$(".post-btn11").click(function(){
$(this).parent().siblings('#post-info').slideToggle();
});
But better use class
because it should repeat and not unique. 但是最好使用
class
因为它应该重复而不是唯一。 Also add this class to first one too. 也将此类添加到第一个。
$(".post-btn11").click(function(){
$(this).parent().siblings('.post-info').slideToggle();
});
Here is the correction to your code. 这是您的代码的更正。 I have also updated your fiddle so go check it out.
我也更新了你的小提琴,所以去看看吧。 You had a problem with giving your post-info element an ID.
给您的post-info元素一个ID时遇到了问题。 In corrected version I simply add
post-info
as a class name. 在更正的版本中,我只需添加
post-info
作为类名。 And also the .sublings()
function will not work, since you applied it to your button element and it will not find any nested elements in it. .sublings()
函数也将不起作用,因为您将其应用于按钮元素,并且在其中找不到任何嵌套元素。 So I needed to find a button's parent element first to get on the "same level" with your next post-info element and then simply use .next()
function 因此,我需要先找到按钮的父元素,以与下一个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-->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.