【发布时间】：2015-02-16 23:54:24
【问题描述】：
在使用 jQuery 1.10 的 slideDown 之后，slideUp 无法正常工作。 这是一个小提琴：fiddle
HTML 由“health-grid-header”li 和相应的“health-grid-content”组成，它们之间有一条连接线。
<ul id="health-grid">
<li class="health-grid-header">
<div id="health-header-1">
<p>Lorem Ipsum</p>
</div>
</li>
</ul>
<div id="health-grid-container">
<div id="health-line"></div>
<div id="health-grid-1" class="health-grid-content">
<p>Lorem Ipsum<span class="yellow-close-icon"></span>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>首先，我隐藏了行和内容。然后，当单击标题时，我使用 slideDown 动画并显示内容和线条。
var healthGridShowed = false;
$('.health-grid-content, #health-line').hide();
$('.health-grid-header').click(function () {
// first check if the content is visible //
if (healthGridShowed) {
} else {
// if not visible //
var newContentIdNum = $(this).children().first().attr('id').slice(-1);
var lineHalfWidth = $('#health-line').outerWidth();
var headerPosition = $(this).position();
var headerHalfWidth = $(this).width() / 2;
$('#health-line').css({
left: (headerHalfWidth + headerPosition.left - lineHalfWidth)
});
$('#health-line').slideDown(500);
$('#health-grid-' + newContentIdNum).slideDown(500).delay(500, function () {
$('#health-grid-' + newContentIdNum).addClass('health-active');
});
}
});内容的右上角有一个小 x，用于折叠可展开部分。按下后，应使用 slideUp 将其折叠。不过什么也没发生。
$('.yellow-close-icon').click(function () {
$('.health-active').slideUp(500, function () {
$('#health-line').slideUp(500);
});
});如果我只尝试向上滑动它确实会发生，但不会发生内容。
谢谢
【问题讨论】：
-
为什么不使用 slideToggle？ api.jquery.com/slidetoggle
-
slideToggle 做同样的事情......只有在隐藏时它会向下滑动而不是向上滑动（在 slideDown 显示它之后）
-
这样不好？ jsfiddle.net/gc067ytw/4
-
感谢@ZivWeissman，但其中有更多因素，例如我不希望标题可点击。