常见问题解答 显示/隐藏扩展答案

Question

我有一个包含 12 个常见问题的列表，但我只想显示前 5 个，直到用户单击“显示更多”按钮。我让这部分工作，但这样做会扩展它显示的新 7 个常见问题解答的答案。我想隐藏答案，直到用户点击问题，但不知道如何去做。我在修改别人的代码，不是我原创的。

示例： [代码]http://63.246.25.145/surety-bonds/contract-bonds/performance_bond.htm[/code]

JS： [代码] //faq问答展开

$("#faqs .question").click(function()
{
    if($(this).hasClass("open"))
    {
        $(this).removeClass("open");
        $("#answer_"+$(this).attr("id").split("_")[1]).slideUp().removeClass("open")
    }
    else
    {
        $("#faqs .question.open").removeClass("open");
        $("#faqs .answer.open").slideUp().removeClass("open");
        $(this).addClass("open");
        $("#answer_"+$(this).attr("id").split("_")[1]).slideDown().addClass("open")
    }
});

//绑定页面常见问题显示/隐藏

$("#faqlistholder5").each(   //count 10 since question <li>s and answer <li>s
    function()
    {
        var f=$("ul",this);

        if(f.children("li").size()<=10)
            return;

        var u=f.children("li:gt(9)",this).hide();
        var m="VIEW MORE &raquo";

        f.append($('<div id="viewMore" class="toggler"><a id="viewmorebuttonFAQ" class="button">'+m+"</a></div>").toggle(
            function()
            {
                u.show();
                $("#viewmorebuttonFAQ").html("VIEW LESS &raquo")
            },
                function()
                {
                    u.hide();$("#viewmorebuttonFAQ").html("VIEW MORE &raquo")
                }))
    });

[/代码]

谁能给我一些急需的指导？

Answer 1

尝试添加

$("#faqs .answer").hide().removeClass("open");

u.show();

之后

---

function()
        {
            u.show();
            $("#faqs .answer").hide().removeClass("open");
            $("#viewmorebuttonFAQ").html("VIEW LESS &raquo")
        }