javascript - 如何找到具有相同类名的其他 div 并关闭它们

Question

我想知道我应该怎么做才能在具有相同类名的多个 div 中只显示一个 div。如果一个打开并且我单击另一个，则打开的应该关闭，而我单击的应该打开。

HTML:

<div class="out">
    <div class="content"> <a>click here to learn more..</a>

    </div>
</div>
<div class="out">
    <div class="content"> <a>click here to learn more..</a>

    </div>
</div>
<div class="out">
    <div class="content"> <a>click here to learn more..</a>

    </div>
</div>

CSS:

.out {
    width:150px;
    height: 25px;
    background-color: green;
    float: left;
    margin-right:10px;
}
.open {
    border-bottom:5px solid peru;
    height: 150px;
}
.out.open .content {
    width:100%;
    height:100%;
}
a {
    display: none;
}
.open .content {
    display: block;
}
.open .content > a {
    color: white;
    text-decoration: underline;
    display: block;
}

JS:

$(document).ready(function () {
    $('.out').click(function () {
        $('.out').find('open').removeClass('open');
        $(this).addClass('open');
    });
});

我知道问题出在 jquery 中，但我不知道我做错了什么。

这里还有一个 fiddle :http://jsfiddle.net/4hpgb/22/

Answer 1

只需更改这一行:

$('.out').find('open').removeClass('open');

为此:

$('.out').removeClass('open');

它should work .

发生的事情是，您要从所有 div.out 中删除所有类 open，然后将类 open 添加到当前类.