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中，但我不知道我做错了什么。

这也是一个小提琴：http://jsfiddle.net/4hpgb/22/

Answer 1

只需更改此行：

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

到此：

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

should work。

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

Answer 2

JSFIDDLE DEMO

$('.out').click(function () {
    $('.out').removeClass('open');
    $(this).toggleClass('open');
});

Answer 3

写：

$('.out').click(function () {
    if(!($(this).hasClass('open'))){
        $('.out.open').removeClass('open');
    }
    $(this).addClass('open');
});

Updated fiddle here.

Answer 4

首先关闭所有打开的div

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

    });
});

演示here

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

4 个答案: