Javascript SlideUp()运行两次
我正在使用jQuery创建一个多选项卡手风琴。“Headline 1”面板工作正常,但在“Headline 2”面板上运行SlideDown()方法两次。我注意到的另一个小问题是,在单击按钮/链接和面板向下滑动之间有一些延迟 您可以在这里查看JSFIDLE来测试并查看问题: jQuery: HTML:Javascript SlideUp()运行两次,javascript,jquery,Javascript,Jquery,我正在使用jQuery创建一个多选项卡手风琴。“Headline 1”面板工作正常,但在“Headline 2”面板上运行SlideDown()方法两次。我注意到的另一个小问题是,在单击按钮/链接和面板向下滑动之间有一些延迟 您可以在这里查看JSFIDLE来测试并查看问题: jQuery: HTML: 内容1 内容2 内容1 内容2 对于选定的每个元素,对slideup的回调将发生一次。这可能是双重呼叫和延迟的原因。@KevinB非常感谢,使用promise和deferred对象很有效。pr
内容1
内容2
内容1
内容2
对于选定的每个元素,对slideup的回调将发生一次。这可能是双重呼叫和延迟的原因。@KevinB非常感谢,使用promise和deferred对象很有效。promise().done(函数(){});你能解释一下这将如何解决这个问题吗?好吧,既然你是在向上滑动多个元素(即所有的面板),那么promise.done确保在真正向下滑动你想要的元素之前,所有的向上滑动都完成了。@user1307016:我所说的“解释”是指“在你的答案中解释”,因为如果一个答案需要另一个用户的评论才能完整,那么它当然不是一个完整的答案。我已经知道它是如何工作的了,而且显然我已经读过他的链接了,因为我把你的问题作为它的副本关闭了。如果我能给你一些建议的话:不要指责人们懒惰。这很粗鲁。
$(document).ready(function() {
var class_link, class_div, content_div;
var all_panels = $('article > div.row').not(':first-child');
$(all_panels).hide();
$('div.buttons a').click(function() {
class_link = $(this).attr('class');
class_div = class_link.match(/[^-]+$/);
content_div = $(this).closest('article').find('div.' + class_div).parent();
if ($(content_div).is(':visible')) {
$(all_panels).slideUp();
} else {
$(all_panels).slideUp(function() {
$(content_div).hide().slideDown();
});
}
return false;
});
});
<section class="grid-container">
<article>
<div class="row clearfix">
<div class="column half">
<h2>Headline 1</h2>
</div>
<div class="column opposite half buttons">
<a class="button-content1" href="#">Content 1</a>
<a class="button-content2" href="#">Content 2</a>
</div>
</div>
<div class="row clearfix">
<div class="column full content1">
<h1>Content 1</h1>
</div>
</div>
<div class="row clearfix">
<div class="column full content2">
<h1>Content 2</h1>
</div>
</div>
</article>
<article>
<div class="row clearfix">
<div class="column half">
<h2>Headline 2</h2>
</div>
<div class="column opposite half buttons">
<a class="button-content1" href="#">Content 1</a>
<a class="button-content2" href="#">Content 2</a>
</div>
</div>
<div class="row clearfix">
<div class="column full content1">
<h1>Content 1</h1>
</div>
</div>
<div class="row clearfix">
<div class="column full content2">
<h1>Content 2</h1>
</div>
</div>
</article>
</section>
// replace
$(all_panels).slideUp(function() {
$(content_div).hide().slideDown();
});
//with
$(all_panels).slideUp().promise().done(function() {
$(content_div).hide().slideDown();
});