jquery - 隐藏其他所有内容，只显示一个 div

Question

一个 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/

Answer 1

或者试试这个

$('.wrap').on('click','.button',function(){
    $('.inner>div>div').slideUp(400);
    $(this).next('.info').slideDown(400);
});

http://jsfiddle.net/a7wwz/4/

您的原始版本不起作用，因为您在容器上使用.slideup()了您希望之后可以看到其元素的容器。在我的版本中，我只是div将容器内最低级别的 s向上滑动.inner。

而且，当然，closest()向上寻找最近​​的父母。你真正的意思是next()。

Answer 2

尝试

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

    var $info = $(this).next('.info').stop(true, true).slideDown(400);
    $('.info').not($info).stop(true, true).slideUp();

});

演示：小提琴

Answer 3

这个怎么样：

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

小提琴