我很确定这就是您想要的,我从以下位置复制了常规 HTML 布局http://makr.com http://makr.com(你提到这就是你想要的):
Demo: http://jsfiddle.net/SO_AMK/xm7Sk/ http://jsfiddle.net/SO_AMK/xm7Sk/
jQuery:
$(".main article:nth-child(4n)").after('<hr class="split"></hr>');
$(".main > article .slidedown").click(function(e) {
e.stopPropagation();
}); // If you click on the slidedown, it won't collapse
var canAnimate = true,
slideIsOpen = false,
animateSpeed = 1000;
$(".main > article").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
}).click(function() {
if (canAnimate) {
canAnimate = false;
var article = $(this),
isThisOpen = article.hasClass("active");
if (isThisOpen) {
$(".main").queue(function () {
hideSlide($(this))
});
}
else {
if (slideIsOpen) {
$(".main").queue(function () {
hideSlide($(this));
}).queue(function () {
positionPage(article, $(this));
}).queue(function () {
showSlide(article, $(this));
}).queue(function () {
positionPage(article, $(this));
});
}
else {
$(".main").queue(function () {
positionPage(article, $(this));
}).queue(function () {
showSlide(article, $(this));
}).queue(function () {
positionPage(article, $(this));
});
}
}
}
});
function showSlide(elm, main) {
canAnimate = false;
slideIsOpen = true;
elm.nextAll("hr.split").first().addClass("active", animateSpeed);
elm.children(".slidedown").css("top", (elm.offset().top + 114)).addClass("active").slideToggle(animateSpeed);
elm.addClass("active");
main.dequeue();
canAnimate = true;
}
function hideSlide(main) {
canAnimate = false;
$(".main article.active").nextAll("hr.split.active").removeClass("active", animateSpeed);
$(".main article.active").children(".slidedown").removeClass("active").slideToggle(animateSpeed);
$(".main article.active").removeClass("active");
$(main).dequeue();
canAnimate = true;
slideIsOpen = false;
}
function positionPage(elm, main) {
canAnimate = false;
var body;
if ($.browser.safari) {
body = $("body");
}
else {
body = $("html");
}
var elmTop = elm.offset().top,
bodyScroll = body.scrollTop();
if (bodyScroll - elmTop == 0) {
var speed = 0;
}
else {
var speed = animateSpeed;
}
body.animate({
scrollTop: elmTop
}, speed, function () {
main.dequeue();
canAnimate = true;
})
}
对于这么小的东西来说,这似乎是一个很大的脚本,但它有一些故障保护功能。唯一的错误是,如果您在转换过程中开始快速单击,有时队列会以错误的顺序结束。但是,普通用户在动画期间不会快速点击:D