Question

使用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);
    });
});

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

由于

Answer 1

您添加class health-active的部分，我将其更改为

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

或者你也可以像

一样写

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

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

它正在发挥作用。您不必要地使用.delay

工作Fiddle

slideUp在slideDown之后无法正常工作

1 个答案: