asp.net - 中继器行扩展-java脚本

Question

在我的转发器控件中，项目模板中的 div 正在折叠和扩展。但是如果第一行展开并且如果我单击第二行 (div)，我希望第一个自动关闭并打开第二个。

提前致谢

    <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" DataSourceID="SqlDataSource1">
   <ItemTemplate>
     <div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"
          onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'>
       <%# DataBinder.Eval(Container.DataItem, "LicenseName")%>
     </div>

     <div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details">
       <b>Submitted By:</b> <%# DataBinder.Eval(Container.DataItem, "Version")%><br />
       <b>Views:</b> <%# DataBinder.Eval(Container.DataItem, "LicenseID", "{0:d}")%><br />
       <b>FAQ:</b><br />
       <%# DataBinder.Eval(Container.DataItem, "StartDate")%>
     </div>
   </ItemTemplate>

Answer 1

如果您可以为所有 div 提供一个 css 类，那么您可以执行以下操作。

在这里，我假设您正在testclass为所有 div 提供 css 类。

function ToggleDisplay(id) 
{
    $('.testclass').each(function() 
    {
        $(this).style.display = 'block';
    });
    var elem = document.getElementById('d' + id);
    elem.style.visibility = 'visible';
}