Question

我正在尝试使用 jquery animate（）函数最小化和扩展“click”事件的div。但是当div的高度减小到0px时，div内的内容仍然可见。我需要div中的内容在div高度变为0px时隐藏，并在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

中查看此代码

Answer 1

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

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

我提供了一个li的代码，您可以尝试使用this来确保必须滑动的.content来自当前的height，另一个是还在它的位置！

另请注意，您遇到的问题来自background-color。

您可以尝试使用一些{{1}}，只是为了检查该div的高度如何变化。但内容仍然存在！

Answer 2

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

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

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

顺便说一句，您的HTML无效。允许LI的唯一兄弟姐妹是LI。

Jquery动画无法正常工作

2 个答案: