1

我正在尝试使用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中查看此代码

4

2 回答 2

1

我想知道当你有slideToggle().

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

我已经提供了一个的代码li，您可以尝试使用this以确保.content必须滑动的那个是从当前的那个开始的，而另一个仍然在它的位置上！

另请注意，您遇到的问题来自height.

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

于 2013-09-10T17:49:26.620 回答
0

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

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

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

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

于 2013-09-10T17:48:00.173 回答