Question

在转发器中，我可以扩展clcik上的行（类标题），如果再次单击则会崩溃。这样可以正常工作。

我可以同时展开和折叠所有行。我想一次扩展一行（类标题）。如果row1打开，如果我单击row2（类标题），则row1必须自动折叠并排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>

Answer 1

为什么不使用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/

在Repeater中切换

1 个答案: