0

div には複数の項目があります。各項目にはボタンと情報 div があります。divのタイトルをクリックすると、すべてをスライドアップまたはフェードアウトしたい、そのdivの情報だけをライトボックススタイルで表示したい。

これが私が試していることですが、うまくいきません。クリックするとすべてがスライドアップしますが、情報は表示されません。

HTML:

<div class="wrap">
    <div class="inner">

        <div class="box">
            <div class="button"></div>
            <div class="info">Info for box 1</div>
        </div>

        <div class="box">
            <div class="button"></div>
            <div class="info">Info for box 2</div>
        </div>

    </div>
</div>

CSS:

.wrap{
    width: 500px;
    background: yellow;
    padding: 20px;
}

.box{
    margin-bottom: 20px;    
}

.info{
    display: none;
}

.button{
    width: 20px;
    height: 20px;
    background: green;
}

jQuery:

$('.wrap').on('click','.button',function(){

    $('.inner').slideUp(400);
    $(this).closest('.info').slideDown(400);

});

デモ: http://jsfiddle.net/a7wwz/

4

3 に答える 3

0

これはどう：

$('.wrap').on('click', '.button', function () {
   $('.inner *').not($(this).parent()).slideUp(400);  
   $(this).next().slideDown(400);  
});

フィドル

于 2013-08-23T12:13:21.997 に答える