我用jquery构建简单的手风琴。我尝试使用jquery .next()方法,但没有运气,点击时没有任何反应。我应该采用另一种jquery方法还是我正确的方式,有任何想法吗? 这是我的HTML:
<article class="TimBox">
<img src="/images/Tim01.jpg">
<div class="TimBoxTekst">
<h2>Title 1</h2>
<h3>Subtitle 1</h3>
<div class="LinkBox">
<a href="#">more<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="clear"></div>
<div class="TimBoxBio">Hidden text 1</div>
</article>
<article class="TimBox">
<img src="/images/Tim01.jpg">
<div class="TimBoxTekst">
<h2>Title 2</h2>
<h3>Subtitle 2</h3>
<div class="LinkBox">
<a href="#">more<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="clear"></div>
<div class="TimBoxBio">Hidden text 2</div>
</article>
这是我的jquery:
$(document).ready(function() {
$(".TimBox .LinkBox").click(function() {
if($(this).next(".TimBoxBio").is(":visible")){
$(this).next(".TimBoxBio").slideUp();
return false;
} else {
$(".TimBox .TimBoxBio").slideUp();
$(this).next(".TimBoxBio").slideToggle();
return false;
}
});
});
这是css:
.TimBox .TimBoxBio{
position:relative;
display:none;
}
答案 0 :(得分:1)
.next()用于获取紧随其后的兄弟。在您的情况下,.TimBoxBio不是相对于.LinkBox的下一个元素。
试试这个:
$(document).ready(function() {
$(".TimBox .LinkBox").click(function() {
var $bio = $(this).closest('.TimBox').find('.TimBoxBio');
if($bio.is(":visible")){
$bio.slideUp();
return false;
} else {
$(".TimBox .TimBoxBio").slideUp();
$bio.slideToggle();
return false;
}
});
});
请在此处查看工作小提琴:http://jsfiddle.net/dou457gk/