使用jquery动态显示/隐藏面板

Question

我有一段代码通过SOAP从SharePoint列表中提取所有列表项，然后以FAQ的形式将它们写入页面。由于此列表可能会变得冗长，因此我希望将它们写入页面，以便只有问题可见，并且当您单击某个问题时，该问题的特定面板以及该面板才可见。

我已经得到了代码工作的所有除一个真实窃听一大跳我 -

<link rel="stylesheet" href="/sites/someSite/System%20Resources/FAQ2.css" type="text/css"/> 
<script src="/sites/someSite/System%20Resources/jquery-1.8.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

$(".question").click(function(){ 
    $("#a"+$(this).attr("id")).slideToggle("slow");}); 

    var soapEnv = 
     "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \ 
      <soapenv:Body> \ 
       <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \ 
        <listName>A Big Fat FAQ</listName> \ 
        <viewFields> \ 
         <ViewFields> \ 
          <FieldRef Name='Question_x0020_Description' /> \ 
          <FieldRef Name='Response'/> \ 
          <fieldRef Name='ID'/>\ 
         </ViewFields> \ 
        </viewFields> \ 
       </GetListItems> \ 
      </soapenv:Body> \ 
     </soapenv:Envelope>"; 

    $.ajax({ 
     url: "/sites/someSite/_vti_bin/lists.asmx", 
     type: "POST", 
     dataType: "xml", 
     data: soapEnv, 
     complete: processResult, 
     contentType: "text/xml; charset=\"utf-8\"" 
    }); 
}); 

function processResult(xData, status) { 
    $(xData.responseXML).find("z\\:row").each(function() { 
    var iDesc=$(this).attr("ows_Question_x0020_Description"); 
    var iResp=$(this).attr("ows_Response"); 
      var iID=$(this).attr("ows_ID"); 

      var liHtml = "<div class='question' id='"+iID+"'>" + iDesc + "</div><div class='answer' id='a"+iID+"'><a href='/sites/someSite/Lists/FAQ/DispForm.aspx? ID='"+iID+"'>"+ iResp +"</a></div>"; 
      alert(liHtml); 
      $("#FAQ").append(liHtml); 

    }); 


} 
</script> 


<h1>A Big Fat FAQ</h1> 
<div id="FAQ"></div> 

一切的小片作品不同的是屏幕上的问题的Click事件没有响应。

在向我展示它作为liHtml变量输出的内容之后，我发现它在iDesc变量周围插入了一组额外的标签，因此没有什么可点击的。

<div class='question'id='5'> 
<div>Why is the sky blue?</div> 
</div> 

我认为这可能是问题所在。 “问题描述”和“响应”列均设置为Rich Text，这是导致备用标签的原因。我将它们都更改为纯文本，并且除去了多余的div，并且我的问题和答案div都有正确的ID，但它仍然不起作用。这可能是另一个那些微小的语法错误的东西，但我在这里画一个空白，以说明还有什么问题。

Answer 1

只是移动代码切换在“processResult”响应

function processResult(xData, status) { 
    $(xData.responseXML).find("z\\:row").each(function() { 
    var iDesc=$(this).attr("ows_Question_x0020_Description"); 
    var iResp=$(this).attr("ows_Response"); 
      var iID=$(this).attr("ows_ID"); 

      var liHtml = "<div class='question' id='"+iID+"'>" + iDesc + "</div><div class='answer' id='a"+iID+"'><a href='/sites/someSite/Lists/FAQ/DispForm.aspx? ID='"+iID+"'>"+ iResp +"</a></div>"; 
      alert(liHtml); 
      $("#FAQ").append(liHtml); 

    }); 

$(".question").click(function(){ 
    $("#a"+$(this).attr("id")).slideToggle("slow");}); 

}