0

在中继器中，我可以展开 clcik 上的行（类标题），如果再次单击它将折叠。这工作正常。

我可以同时展开和折叠所有行。我想一次展开一行（类标题）。如果打开第 1 行，如果我单击第 2 行（类标题），则第 1 行必须自动折叠，第 2 行必须展开.

谢谢

编辑

非常感谢。现在，当我单击 row1 时，它正在扩展，当我单击 row2 时，row1 正在折叠，而 row2 正在扩展。但是，当我单击 row1（类标题）时，它正在扩展，但是当我再次单击 row1 时，它也必须折叠。那是行不通的

<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';
        }
    }
}


<style>
    .header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer;
           background-color:#cccccc; font-family: Verdana; }
  .details { display:none; visibility:hidden; 
             font-family: Verdana; }
</style>

    &nbsp;<div style="overflow: scroll; overflow-x: hidden; overflow-y: auto;background-color:gray; height: 500px; width: 895px">

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">

         <ItemTemplate>


 <div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"
      onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);' style="border-style: none;">
     <asp:Panel ID="Panel3" runat="server" Height="30px" BorderStyle="None" BackColor="#79FFFF">

    <%# DataBinder.Eval(Container.DataItem, "License")%> 
   <%# DataBinder.Eval(Container.DataItem, "Name")%>

   <%# DataBinder.Eval(Container.DataItem," Date")%>
  </asp:Panel> 
 </div>

 <div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details">

  <asp:Panel ID="Panel2" runat="server" Height="195px" BackColor="Gray" Font-Bold="False" ForeColor="Maroon">
  <br />
      <asp:Label ID="Label1" runat="server" Text="LicenseID"></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;

                <asp:TextBox ID="TextBox1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"LicenseID") %>' Enabled="False" BackColor="Gray" BorderStyle="None"></asp:TextBox>
      <asp:Label ID="Label2" runat="server" Text="License Name"></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:TextBox ID="TextBox2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"LicenseName")%>' Enabled="false" BackColor="Gray" BorderStyle="None"></asp:TextBox>

            </asp:Panel>

 </div>

        </ItemTemplate>
4

1 回答 1

0

为什么不使用jQuery？- 首先为每一行添加一个类（可能是.details？），然后执行以下操作：

jQuery：

function toggleDisplay(id) {
   $('.details').hide();
   $('#d'+id).show();
}

但是，如果您出于某种原因不能使用 jQuery - 在纯 javascript 中还有一个类似类的解决方案......
纯 JavaScript：

function ToggleDisplay(id) {
    var allDetails = document.getElementsByClassName('details');
    var detaisToShow = document.getElementById('d' + id);
    for(var i=0; i<allDetails.length; i++){
        allDetails[i].style.display = 'none';
        allDetails[i].style.visibility = 'hidden';
    }
    detaisToShow.style.display = 'block';
    detaisToShow.style.visibility = 'visible';
}

这是一个希望如此期望的行为的工作小提琴：http: //jsfiddle.net/WFUMU/

于 2013-10-09T09:08:23.827 回答