Jquery动画无法正常工作

我试图使用jqueryanimate（）函数最小化并展开“click”事件上的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>

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"
        });
    }
});

});

---

请在

中查看这段代码，它不完全符合您的要求，但要优雅得多，我想说：

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

---

顺便说一下，你的HTML是无效的。LIs允许的唯一兄弟姐妹是LIs

不完全是你想要的，但更优雅，我想说：

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

---

顺便说一下，你的HTML是无效的。LIs允许的唯一兄弟姐妹是LIs

我想知道，当你有了

slideToggle（）

时，为什么还要写这么多行代码

我已经为一个

li

提供了代码，您可以尝试使用

此

来确保必须滑动的

.content

来自当前的

，而另一个仍在其位置

还请注意，您遇到的问题来自
高度

您可以尝试使用一些
背景色
，只是为了检查该分区的高度是如何更改的。但是内容仍然存在
 我想知道，当你有了
slideToggle（）
时，为什么还要写这么多行代码

我已经为一个
li
提供了代码，您可以尝试使用
此
来确保必须滑动的
.content
来自当前的
，而另一个仍在其位置

还请注意，您遇到的问题来自
高度

您可以尝试使用一些
背景色
，只是为了检查该分区的高度是如何更改的。但是内容仍然存在
 为什么不使用slideToggle（）？可以使用overflow:hidden；上。content@isherwood：）我现在尝试了slideToggle（），效果很好。但是为什么使用animate（）不起作用呢？。这是animate（）函数的缺点吗？animate显然不会自动处理溢出。为什么不使用slideToggle（）？可以使用溢出：隐藏；上。content@isherwood：）我现在尝试了slideToggle（），效果很好。但是为什么使用animate（）不起作用呢？。这是animate（）函数的一个缺点吗？显然，animate不会自动处理溢出。
$('li').click(function () {
  $('.content').slideToggel();
});