javascript - 使细节可见的切换功能

Question

在中继器中，我有带有切换功能的标题和详细信息。

1. 当我单击 row1(header) 时，它正在展开，当我单击 row2 时，row1 正在折叠，而 row2 正在展开。这工作正常。

2. 我的问题是当我单击 row1（类标题）时正在扩展，但是当我再次单击 row1 时它必须折叠。那是行不通的。如何使 1 和 2 都工作？

-

<script language="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';
}
</script>

<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>

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

 <HeaderTemplate>
       <asp:Panel ID="Panel1" runat="server" BackColor="White">

       <table id="table1" width="905" style="table-layout: fixed; border:solid 2px   black">
      <thead>
        <tr id="thead" style="width: 905px; background-color:#BEBEBE" bgcolor="Gray">

              <td>License ID</td>


             <td>Start Date</td>
             <td>Renewal</td>
             <td>License Name</td>
         </tr>
       </thead>
            </asp:Panel>
     <table id="table12" width="905" style="table-layout: fixed; border:solid 2px black">
     <thead>

     </thead>
 </HeaderTemplate>

  <ItemTemplate>


  <div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"
  onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);' style="border-style:  none; font-weight: normal;" align="left">

   <asp:Panel ID="Panel3" runat="server" Height="30px" BorderStyle="None" BackColor="#79FFFF">


    <%# DataBinder.Eval(Container.DataItem, "LicenseID")%> 
    <asp:HyperLink ID="HyperLink1" runat="server" Width="230px"></asp:HyperLink>

   <%# DataBinder.Eval(Container.DataItem, "StartDate")%>
              <asp:HyperLink ID="HyperLink5" runat="server"  Width="150px"></asp:HyperLink>
   <%# DataBinder.Eval(Container.DataItem, "Renewal")%>
    <asp:HyperLink ID="HyperLink4" runat="server" Width="150px"></asp:HyperLink>
   <%# DataBinder.Eval(Container.DataItem, "LicenseName")%>


 </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="License"></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,"Name")%>' Enabled="false" BackColor="Gray" BorderStyle="None"></asp:TextBox>

      <asp:Label ID="Label3" runat="server" Text="Start Date"></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <asp:TextBox ID="TextBox3" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"StartDate") %>' Enabled="False" BackColor="Gray" BorderStyle="None"></asp:TextBox>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <br />
      <br />
  </asp:Panel>

 </div>

 </ItemTemplate>

Answer 1

您需要检查单击的标题的当前状态。您的代码可以修改为以下列方式工作。

function ToggleDisplay(id) {
   var allDetails = document.getElementsByClassName('details');
   var detaisToShow = document.getElementById('d' + id);
   var curDisState = detaisToShow.style.display == 'block'?true:false;
for(var i=0; i<allDetails.length; i++){
   allDetails[i].style.display = 'none';
   allDetails[i].style.visibility = 'hidden';
}
if(!curDisState){
  detaisToShow.style.display = 'block';
  detaisToShow.style.visibility = 'visible';
}
else{
  detaisToShow.style.display = 'none';
  detaisToShow.style.visibility = 'invisible';
}
}

因此，根据标题的当前状态，切换将起作用。