2013-03-11 147 views
0

我有一個12個常見問題的列表,但我只想顯示前5個,直到用戶單擊「顯示更多」按鈕。我已經完成了該部分的工作,但是這樣做可以擴展它顯示的新7 FAQ的答案。我想保留隱藏的答案,直到用戶點擊問題,但不知道如何去解決問題。我正在修改別人的代碼,我原來並沒有寫它。FAQ顯示/隱藏擴展答案

實施例: [代碼] http://63.246.25.145/surety-bonds/contract-bonds/performance_bond.htm [/代碼]

JS: [代碼] //常見問題解答問題答案擴大

$("#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") 
    } 
}); 

//邦德頁FAQ顯示/隱藏

$("#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") 
       })) 
    }); 

[/代碼]

任何人都可以提供我一些急需的指導嗎?

回答

0

嘗試添加

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

u.show();


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

謝謝,但對編輯沒有運氣。 – MichaelW 2013-03-11 16:52:15

+0

你確定代碼的一部分被執行了嗎?嘗試添加一個console.log或一個警報() – TizianoPiccardi 2013-03-11 17:26:54

+0

確認。請參閱以下示例。示例:[code] http://63.246.25.145/surety-bonds/contract-bonds/performance_bond.htm [/ code] – MichaelW 2013-03-11 20:08:36