在Repeater控件中创建可隐藏区域

核心提示： ＜script language="JavaScript"＞function ToggleDisplay(id){var elem = document.getElementById('d' + id);if (elem){if (elem.style.

＜script language="JavaScript"＞
function ToggleDisplay(id)
{
　var elem = document.getElementById('d' + id);
　if (elem)
　{
　　if (elem.style.display != 'block')
　　{
　　　elem.style.display = 'block';
　　　elem.style.visibility = 'visible';
　　}
　　else
　　{
　　　elem.style.display = 'none';
　　　elem.style.visibility = 'hidden';
　　}
　}
}
＜/script＞
＜style＞
.header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer;
background-color:#cccccc; font-family: Verdana; }
.details { display:none; visibility:hidden; background-color:#eeeeee;
font-family: Verdana; }
＜/style＞
　＜asp:Repeater id="rptFAQs" runat="server"＞
　＜ItemTemplate＞
　　＜div id='h＜%# DataBinder.Eval(Container, "ItemIndex") %＞' class="header"
onclick='ToggleDisplay(＜%# DataBinder.Eval(Container, "ItemIndex") %＞);'＞
　　　＜%# DataBinder.Eval(Container.DataItem, "Description") %＞
　　＜/div＞
　　＜div id='d＜%# DataBinder.Eval(Container, "ItemIndex") %＞' class="details"＞
　　　＜b＞Submitted By:＜/b＞ ＜%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %＞＜br /＞
　　　＜b＞Views:＜/b＞ ＜%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %＞＜br /＞
　　　＜b＞FAQ:＜/b＞＜br /＞
　　　＜%# DataBinder.Eval(Container.DataItem, "Answer") %＞
　　＜/div＞
　＜/ItemTemplate＞
＜/asp:Repeater＞

我们重点来看下后半部分的代码，其中

＜div id='h＜%# DataBinder.Eval(Container, "ItemIndex") %＞' class="header"

onclick='ToggleDisplay(＜%# DataBinder.Eval(Container, "ItemIndex") %＞);'＞会将每条记录的问题部分，包裹在类似＜div id=h1＞,＜div id=h2＞之类的标记内，当点击时，则调用toggledisplay函数，在该函数内，看传入的参数是否是需要显示的区域（注意，通过

var elem = document.getElementById('d' + id);）一句进行判断，是的话则设置display和visiblity属性显示，否则不显示。