我真的坚持我的代码,它工作正常,除了一件事,我需要关闭所有打开的div,当我单击其他div打开时,这是我的代码:
function readFaq() {
$('.find-faq-inner h3').prepend('<span id="spanfaq" class="faq-open"></span>');
$('.find-faq-inner h3').each(function () {
var tis = $(this), state = false;
var answer = tis.next('div').hide().css('height', 'auto').slideUp();
tis.click(function () {
state = !state;
answer.slideToggle(state);
tis.toggleClass('active', state);
if (state == true) {
tis.find('#spanfaq').removeClass('faq-open');
tis.find('#spanfaq').addClass('faq-close');
}
else {
tis.find('#spanfaq').removeClass('faq-close');
tis.find('#spanfaq').addClass('faq-open');
}
});
});
}
<div class="find-faq-inner">
<div class="text">
<h3>FAQ1</h3>
<div>
text of faq
</div>
</div>
</div>
任何想法都会有帮助,谢谢
最佳答案
function readFaq() {
$('.find-faq-inner h3').prepend('<span id="spanfaq" class="faq-open"></span>');
$('.find-faq-inner h3').each(function () {
var tis = $(this), state = false, answer = tis.next('div').hide().css('height', 'auto').slideUp();
tis.click(function () {
state = !state;
$('.find-faq-inner .text div').hide();// This will hide all the divs
answer.slideToggle(state);
tis.toggleClass('active', state);
if (state == true) {
tis.find('#spanfaq').removeClass('faq-open');
tis.find('#spanfaq').addClass('faq-close');
}
else {
tis.find('#spanfaq').removeClass('faq-close');
tis.find('#spanfaq').addClass('faq-open');
}
});
});
}
在上面的函数中我添加了
$('.find-faq-inner .text div').hide();
这将隐藏 find-faq-inner
div 中的所有 div,在您的代码中相应地使用它。
为了更安全,您还可以使用
$('.find-faq-inner .text > div').hide();
它只会隐藏那些 text
类的 div 的直接子代的 div
关于jquery 在其他 div 激活时切换一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10706264/