我想知道我应该怎么做才能在具有相同类名的多个 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/
最佳答案
只需更改这一行:
$('.out').find('open').removeClass('open');
为此:
$('.out').removeClass('open');
它should work .
发生的事情是,您要从所有 div.out
中删除所有类 open
,然后将类 open
添加到当前类.
关于javascript - 如何找到具有相同类名的其他 div 并关闭它们,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20748520/