[英]Asp.Net repeater control with javascript
我使用中继器控件创建了常见问题解答页面,问题和答案从代码隐藏的运行时绑定如下。
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>
它的工作原理是,当单击 One Question 时,它会显示该问题的答案。
我的问题是:我想更新脚本,以便当我们单击一个特定问题时,它应该显示该问题的答案,还应该隐藏其他问题的答案。(如http://www.edubrainschool.com /faq.php )。
最好的方法是绑定该 TR 的点击。 您可以通过将 css 应用于 TR 来做到这一点。
<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”或参考以下链接
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.