单击时使表单折叠

Question

我如何制作，以便在回答时表单崩溃，但如果有人改变了主意，他们可以点击折叠的表单然后打开它？我愿意使用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);

}); //]]>

Answer 1

我认为您可以使用jquery的切换来隐藏和显示元素。也许这可以简化您的代码并使其工作。见这里：http://api.jquery.com/toggle/