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

1 つの のコードを提供しました。スライドする必要がある が現在のものであり、もう 1 つはまだその位置にあることを確認するためliに使用できます。this.content

また、あなたが陥っていた問題はheight.

background-colorそのdivの高さがどのように変化するかを確認するためだけに、some を使用してみることができます。でも中身はまだまだ！

于 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 に答える