用於使細節可見的切換功能

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

因此，根據標題的當前狀態，切換將起作用。