1

リピーターコントロールを使用してFAQページを作成しました。質問と回答は、コードビハインドからランタイムにバインドされています。

ASPXコード

<asp:Repeater ID="RepDetails" runat="server">
 <ItemTemplate>
 <table id="tblRepeater">
    <tr id="QARow" runat="server">
      <td>
       <div id="QuestionDiv" onclick="return show(this, 'AnswerDiv');">
        Q:<asp:label id="lblQuestion" runat="server" Text='<%# Eval("Question")%>' CssClass="lblQueClass"></asp:label>
       </div>
       <div id="AnswerDiv" style="display:none;">
        Ans:<asp:Label id="lblAnswerClass" runat="server" Text='<%# Eval("Answer")%>' CssClass="lblAnswerClass"></asp:Label>
       </div>
      </td>   
    </tr>
  </ItemTemplate>
  <FooterTemplate>
 </table>
  </FooterTemplate>
</asp:Repeater>

それは素晴らしい働きをします！事は私が答えを開いたり閉じたりするために次のスクリプトを使用したということです。

<script type="text/javascript">
   function show(QuestionDiv, AnswerDiv) {
   var arrDIVs = QuestionDiv.parentNode.getElementsByTagName("Div");
   for (var i = 0; i < arrDIVs.length; i++) {
        var oCurDiv = arrDIVs[i];
        if (oCurDiv.id.indexOf(AnswerDiv) >= 0) {
            var blnHidden = (oCurDiv.style.display == "none");
            oCurDiv.style.display = (blnHidden) ? "block" : "none";
            }
         }
       return false;
     }
</script>

1つの質問をクリックすると、その質問の答えが表示されます。

私の質問は次のとおりです。特定の質問をクリックすると、その質問の回答が表示され、他の質問の回答も非表示になるようにスクリプトを更新します（http://www.edubrainschool.comなど）。 /faq.php）。

4

1 に答える 1

0

そのための最良の方法は、その TR のクリックをバインドすることです。これを行うには、TR に css を適用します。

    <asp:Repeater ID="RepDetails" runat="server">
 <ItemTemplate>
 <table id="tblRepeater">
    <tr id="QARow" runat="server" class="TROpenCSS">
      <td>
       <div id="QuestionDiv" class="QuestionCSS" onclick="return show(this, 'AnswerDiv');">
        Q:<asp:label id="lblQuestion" runat="server" Text='<%# Eval("Question")%>' CssClass="lblQueClass"></asp:label>
       </div>
       <div id="AnswerDiv" class="AnswerCss" style="display:none;">
        Ans:<asp:Label id="lblAnswerClass" runat="server" Text='<%# Eval("Answer")%>' CssClass="lblAnswerClass"></asp:Label>
       </div>
      </td>   
    </tr>
  </ItemTemplate>
  <FooterTemplate>
 </table>
  </FooterTemplate>
</asp:Repeater>

そして、それらのCSSのクリックイベントをバインドします

$('.TROpenCSS').bind('click',function(){
// Do your code to show the TD
});

すべてのクリック/マウスオーバーに他のバインドを追加

または、「ddaccordion.js」を使用するか、次のリンクを参照してください。

于 2013-01-14T14:38:39.157 に答える