[英]Simple accordion with jquery
我用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;
}
.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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.