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内最低级别的.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();

});

演示：Fiddle

Answer 3

这个怎么样：

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

FIDDLE

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

3 个答案: