如果我有这个 html:
<div class="main cat_info">
<h2>Question 1?</h2>
<div class="answer">
<p>bla bla bla</p>
</div>
<h2>question 2</h2>
<div class="answer">
<p>bla bla bla</p>
</div>
<h2>Question 3?</h2>
<div class="answer">
<p>bla bla bla</p>
</div>
</div>
我打开一个问题,如果打开另一个问题,它就会关闭(这就是我想要的)。但是当我将 h2 和 .answer 包装在 div 中时,它不起作用。喜欢:
<div class="main cat_info">
<div class="holder">
<h2>Question 1?</h2>
<div class="answer">
<p>bla bla bla</p>
</div>
</div>
<div class="holder">
<h2>question 2</h2>
<div class="answer">
<p>bla bla bla</p>
</div>
</div>
<div class="holder">
<h2>Question 3?</h2>
<div class="answer">
<p>bla bla bla</p>
</div>
</div>
</div>
这是 jquery:
$(document).ready(function() {
$('.answer').hide();
$('.cat_info h2').on('click', function() {
var state = $(this).next('.answer').is('.open');
if (state) {
$(this).removeClass('active').next('.answer').removeClass('open').fadeOut();
}else{
$(this).addClass('active').next('.answer').addClass('open').slideDown()
.siblings('.answer').removeClass('open').slideUp().end()
.siblings('h2').not(this).removeClass('active');
}
});
});
我猜这是 sibling 的问题。帮忙?
最佳答案
有了这个标记,它可能看起来像:
$(document).ready(function() {
$('.answer').hide();
$('.cat_info h2').on('click', function() {
var state = $(this).is('.active');
if (state) {
$(this).removeClass('active').next('.answer').fadeOut();
} else {
$(this).addClass('active').next('.answer').slideDown()
.closest('.holder').siblings('.holder').find('.answer').slideUp().end()
.find('h2').not(this).removeClass('active');
}
});
});
关于jquery - 兄弟问题 - 当打开 1 个面板时关闭所有打开的面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14060333/