JQuery显示/全部隐藏(FAQ页面)
我在FAQ页面上使用了两个jQuery函数。每当点击标题(h4)时,第一个激活。它基本上可以显示答案,并确保所有其他答案都已关闭(即一次只打开一个答案)。第二个功能是显示/隐藏页面上的所有问题。JQuery显示/全部隐藏(FAQ页面)
每当用户打开常见问题解答(由第一个功能激活),然后尝试执行全部显示/隐藏操作时,就会出现我的问题。显示/隐藏功能使用切换系统,所以这会导致所有问题切换,包括已经显示的问题。结果是(使用说,显示全部)显示除了已经显示的那个之外的所有问题。这个答案是隐藏的(因为它被切换)。理想情况下,它会保持开放状态,因为它已经开放。
这个问题的最佳解决方案是什么?这两个jQuery的功能如下:
<script>
// Clicking a question will show that answer and hide all others
$(function() {
$('#faqQuestions h4').each(function() {
var tis = $(this),
state = false,
answerNext = tis.next('div').hide().css('height','auto').slideUp();
answerAll = $('#faqQuestions').children('div').hide().css('height','auto').slideUp();
tis.click(function() {
state = !state;
answerAll.slideUp(state);
$('#faqQuestions').children('h4').removeClass('active');
answerNext.slideToggle(state);
tis.addClass('active',state);
});
});
});
</script>
<script>
// Show/hide all questions
var toggle = false;
$(function() {
$('a.toggle').click(function(e) {
var $this = $(this);
$('#faqQuestions div').toggle(300,function() {
if(!toggle) {
$this.text('Hide All Questions/Answers');
toggle = !toggle;
}else {
$this.text('Show All Questions/Answers');
toggle = !toggle;
}
});
e.preventDefault();
});
});
</script>
为了演示,我的工作页面,请访问:http://r-8.us/~richard.r8us/faq
而不是
$('#faqQuestions div').toggle(300,function() {
if(!toggle) {
$this.text('Hide All Questions/Answers');
toggle = !toggle;
}else {
$this.text('Show All Questions/Answers');
toggle = !toggle;
}
});
尝试
if(!toggle) {
$('#faqQuestions div').show(300);
$this.text('Hide All Questions/Answers');
}else {
$('#faqQuestions div').hide(300);
$this.text('Show All Questions/Answers');
}
toggle = !toggle;
看着你的答案让我感到很蠢。我真的不知道(或者有时间去学习)jQuery,因为我只是为了这个网站而使用它,但是我的一般编程知识应该会导致这样的答案。至少感谢您的快速回复,以便我能继续与其他事情相处。 – 2012-04-13 04:08:20
我认为像这样的东西可能更符合你想要完成的事情:
$(function() {
var allOpen = false;
$("#faqQuestions h4").click(function() {
var h4 = $(this);
if(!h4.hasClass("active")) {
h4.addClass("active").next("div").slideToggle();
}
else {
h4.removeClass("active").next("div").slideToggle();
}
});
$('a.toggle').click(function(e) {
e.preventDefault();
$("#faqQuestions h4").each(function() {
var h4 = $(this);
if(!allOpen && !h4.hasClass("active")) {
h4.addClass("active").next("div").slideToggle();
}
else if(allOpen) {
h4.removeClass("active").next("div").slideToggle();
}
});
if(!allOpen) {
allOpen = true;
$(this).text("Hide All Questions/Answers");
}
else {
$(this).text("Show All Questions/Answers");
}
});
});
露出新的一个已经点击了(这似乎奇怪我允许用户一次把它们全部打开或者只能在读取一个时,这不再崩溃任何打开的常见问题解答部分时间)。
请勿使用'toggle'来代替使用'hide \ show'。 – 2012-04-13 03:55:41
为什么不让它总是隐藏所有答案?为什么用户需要功能来一次显示所有答案? – 2012-04-13 04:00:08
@IliaFrenkel谢谢!这就是我所用的(如我选择的答案中所示)。 – 2012-04-13 04:09:18