我该怎么做才能使表单在回答时折叠，但是如果有人改变主意，他们可以单击折叠的表单并重新打开？我愿意使用 javascript 和 jquery。我在网上搜索了 java 和 jquery 中的可折叠表单，但没有任何有用的。
这是 jsfiddle 中的表格：http: //jsfiddle.net/itay1989/ffKKN/6/
这是表单的javascript：
$(document).ready(function () {
$('.radio div').on('click', function () {
var $this = $(this),
$parent = $this.parent(),
value = $this.attr('value');
$parent.children().removeClass('active');
$this.addClass('active');
$parent.attr('value', value);
//get all selected radios
var q1 = $('div[name="q1"].active');
var q2 = $('div[name="q2"].active');
var q3 = $('div[name="q3"].active');
var q4 = $('div[name="q4"].active');
//make sure the user has selected all 3
if (q1.length !== 0 && q2.length !== 0 && q3.length !== 0 && q4.length !== 0) {
//now we know we have 3 radios, so get their values
q1 = q1.attr('value');
q2 = q2.attr('value');
q3 = q3.attr('value');
q4 = q4.attr('value');
// activate button
$('#next_button').removeAttr('disabled');
//now check the values to display a different link for the desired
configuration
if (q1 == "AT&T" && q2 == "8GB" && q3 == "Black" && q4 == "Black") {
$('#next_button').val('att 8gb black').click(function () {
window.location.href = 'http://google.com/'
});
} else if (q1 == "AT&T" && q2 == "16GB" && q3 == "White" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button
value=Next onclick=\"window.location.href='http://bing.com/';\">another
option</input>";
} else if (q1 == "AT&T" && q2 == "16GB" && q3 == "Black" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button
value=Next onclick=\"window.location.href='http://gmail.com/';\">oops</input>";
} else if (q1 == "AT&T" && q2 == "8GB" && q3 == "White" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button
value=Next onclick=\"window.location.href='http://hotmail.com/';\">can't</input>";
} else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "White" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button
value=Next onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
} else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "Black" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button
value=Next onclick=\"window.location.href='http://webs.com/';\">orange</input>";
} else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "White" && q4 == "Black")
{
document.getElementById("linkDiv").innerHTML = "<input type=button
value=Next onclick=\"window.location.href='http://gazelle.com/';\">green</input>";
} else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "Black" && q4 == "Black")
{
document.getElementById("linkDiv").innerHTML = "<input type=button
value=Next onclick=\"window.location.href='http://glyde.com/';\">blue</input>";
} else if (q1 == "AT&T") {
document.getElementById("linkDiv").innerHTML = "<input type=button
value=Next onclick=\"iphone4';\">blue</input>";
}
}
});
var questions = $(".question");
var showQuestions = function (index) {
for (var i = 0; i < questions.length; i++) {
if (i < index) {
questions.eq(i).css("display", "block");
} else {
questions.eq(i).css("display", "none");
}
}
if (index > 1) {
// only scroll to the questions after the first one is clicked
$('html, body').animate({
scrollTop : $(questions.eq(index - 1)).offset().top
},'slow');
}
}
for (var i = 0; i < questions.length; i++) {
(function (index) {
questions.eq(index).find("div[type='radio']").on("click", function () {
showQuestions(index + 2);
})
})(i);
}
showQuestions(1);
}); //]]>