slideUp 在 slideDown 后不工作

Question

slideUp 在使用 jQuery 1.10 的 slideDown 后无法正常工作。这是 fiddle：fiddle

HTML由"health-grid-header"里和对应的"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>

首先，我隐藏了行和内容。然后，当单击 header 时，我使用 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);
    });
});

如果我只尝试向上滑动线，它确实会发生，但不会发生内容。

谢谢

Answer 1

你加classhealth-active的部分，我改成了

$('#health-grid-' + newContentIdNum).addClass('health-active').slideDown(500);

或者你也可以这样写

$('#health-grid-' + newContentIdNum).slideDown(500, function(){
$(this).addClass('health-active');
});

如果您想在 fadeOut() 完成后 addClass。

它正在运行。您不必要地使用了 .delay

工作Fiddle

slideUp 在 slideDown 后不工作

slideUp not working after slideDown

jquery

slideup