我猜我的if / else逻辑是否正确。基本上,我有一个手风琴结构,在页面加载时,第一个手风琴窗格一半露出到150px的高度。然后,当用户单击手风琴标题时,它会完全打开到320px的高度。下次单击时,它应该关闭并像标准手风琴一样显示其他手风琴元素。它目前可以正常工作,但不平滑,在完全显示之前,手风琴窗格关闭。
这是html:
<div class="accordion">
<h3 class="acc-header glanceH">At a glance</h3>
<div class="acc-content glanceC slider" >
<div class="hero-video">
</div>
</div>
<h3 class="acc-header">What we do</h3>
<div class="acc-content" >
<div class="hero-video what-we-do">
</div>
</div>
<h3 class="acc-header">How we do it</h3>
<div class="acc-content how" >
</div>
<h3 class="acc-header">Where we reach</h3>
<div class="acc-content where" >
</div>
<h3 class="acc-header">How</h3>
<div class="acc-content" >
</div>
</div>
这是jQuery:
//generally slides all accordion elements with class "acc-content" when div with class "acc-header" is clicked
$('.acc-header').click(function(e) {
e.preventDefault();
$(this).toggleClass('acc-active');
$(this).next('.acc-content').slideToggle(200).siblings('.acc-content').slideUp(200);
$(this).siblings().removeClass('acc-active');
});
//when the page loads 'peek' at the content of the first accordion content (to 150px depth)
$('.slider').css('height','150px');
$('.slider').animate({ height: 'show'}, 'slow').addClass('itsopen');
//if its already been opened, close it, else open it to 320px
$('.glanceH').click(function() {
if(!$(this).hasClass('acc-active')) {
$(this).next().siblings('.acc-content').slideUp(2000);
$(this).siblings().removeClass('acc-active');
}
else if($('.slider').hasClass('itsopen')){
$('.slider').animate({ height: 320}, 'slow');
}
});
最佳答案
更新:糟糕,如果我阅读了问题-Here is a demo:P
//generally slides all accordion elements with class "acc-content" when div with class "acc-header" is clicked
$('.accordion .acc-header').click(function() {
var first = $('.slider');
// open peek if clicked, otherwise hide it
if (first.is('.itsopen')) {
if ($(this).next().is('.acc-active')) {
// open peek to full height
first.removeClass('itsopen').animate({ height: '320px' }, 'slow');
return;
} else {
// close first because a different header was clicked
first.removeClass('itsopen acc-active').slideUp('slow');
}
}
// remove active class from all content
$('.acc-content').removeClass('acc-active');
// show active content
$(this).next().addClass('acc-active').toggle('slow');
// close all content that isn't active
$('.acc-content:not(.acc-active').slideUp('slow');
return false;
})
// initialize accordion with all content closed
.next().hide();
//when the page loads 'peek' at the content of the first accordion content (to 150px depth)
$('.slider')
.css({ height: '0px' })
.show()
.animate({ height: '150px' }, 'slow')
.addClass('itsopen acc-active');