Jquery 动画无法正常工作答案

【问题标题】：Jquery animation not working properltyJquery 动画无法正常工作
【发布时间】：2013-09-10 17:44:03
【问题描述】：

我正在尝试使用 jquery animate() 函数最小化和扩展“点击”事件上的 div。但是当 div 的高度减小到 0px 时，div 里面的内容仍然可见。我需要在 div 高度变为 0px 时隐藏 div 内的内容，并在 div 展开时可见。请帮我。解决问题

html代码

<ul>
<div class="box">
    <li>Input One</li>
    <div class="content">
        <input type="text" id="input1" />
    </div>
</div>
<div class="box">
    <li>Input Two</li>
    <div class="content">
        <input type="text" id="input2" />
    </div>
</div>

CSS代码

li {
list-style:none;
background-color:#666;
width:200px;
color:#f0f0f0;
cursor:pointer;
}
.box {
width:200px;
border:1px solid #ccc;
}
.content {
background-color:#ddd;
}

jquery 代码

$(document).ready(function () {

$("li").on('click', function () {
    var par = $(this).parent('.box');

    if (par.children('.content').css("height") !== "0px") {

        par.children('.content').animate({
            "height": "0px",
            "min-height": "0px"
        });
    } else {

        par.children('.content').animate({
            "min-height": "20px",
            "height": "auto"
        });
    }
});

});

在jsfiddle查看此代码

【问题讨论】：

为什么不使用 slideToggle()？
你可以使用溢出：隐藏；在 .content
@isherwood :) 我现在尝试了 slideToggle()，它工作正常。但为什么它不能使用 animate() 工作？这是 animate() 函数的缺点吗？
Animate 显然不会自动处理溢出。

标签： jquery

【解决方案1】：

我想知道当你有slideToggle() 时，你为什么要编写所有这些代码行。

$('li').click(function () {
  $('.content').slideToggel();
});

我已经提供了一个li的代码，你可以尝试使用this来确保要滑动的.content是来自当前的，而另一个还在原位！

还要注意您遇到的问题来自height。

您可以尝试使用一些background-color，只是为了检查该div 的高度是如何变化的。但是内容还在！

【讨论】：

【解决方案2】：

不完全符合您的要求，但更优雅，我会说：

$("li").on('click', function () {
    $(this).next('.content').slideToggle();
});

http://jsfiddle.net/isherwood/BLMbd/4/

顺便说一句，您的 HTML 无效。 LI 唯一允许的同级是 LI。

【讨论】：