0

リピーターではヘッダーとディテールをトグル機能で持っています。

  1. 行1（ヘッダー）をクリックすると展開され、行2をクリックすると行1が折りたたまれ、行2が展開されます。これはうまくいっています。

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

1 に答える 1

0

クリックされたヘッダーの現在の状態を確認する必要があります。以下の方法で動作するようにコードを変更できます。

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

したがって、ヘッダーの現在の状態に基づいて、トグルが機能します。

于 2013-10-11T08:21:25.530 に答える