asp.net - 显示/隐藏 div 标签 javascript

Question

我有一个 gridview 列，它从服务器获取大量文本。因此，我不想在网格加载后显示所有文本，而是仅在用户单击展开链接然后使用折叠链接关闭它时才显示它。这是我所拥有的。 请注意，我已经知道我可以将两个 JavaScript 函数放在一个函数中；我现在正在两个单独的函数中进行测试。

<script type="text/javascript" language="javascript" >
function hidelink() {
    var col = $get('col');
    var exp = $get('exp');
    col.style.display = 'none';
    exp.style.display = '';

}
function showlink(){
    var col = $get('col');
    var exp = $get('exp');
   col.style.display = '';
   exp.style.display = 'none';
}

<asp:GridView ID="GridView2" Width="400px" runat="server" AutoGenerateColumns="False"   
AllowPaging ="True"
BackColor="White" BorderColor="#999999" 
BorderStyle="None" BorderWidth="1px" 
CellPadding="3" DataKeyNames="APPID" 
DataSourceID="SqlDataSource3" 
PagerSettings-Mode="NextPreviousFirstLast"                EnableSortingAndPagingCallbacks="True">

<PagerSettings Mode="NextPreviousFirstLast" />

 <RowStyle BackColor="#EEEEEE" ForeColor="Black" />
 <Columns>
 <asp:BoundField DataField="stuff" HeaderText="Name" ReadOnly="True" 
 SortExpression="app" />
 <asp:BoundField DataField="Description" HeaderText="Short Descr" 
 ReadOnly="True" SortExpression="des" />
 <asp:TemplateField HeaderText="Long Descr" SortExpression="data">
 <EditItemTemplate>
 <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("data") %>'></asp:TextBox>
 </EditItemTemplate>
 <ItemTemplate>
 <div id="col">
 <asp:LinkButton ID="expand" runat="server" OnClientClick ="hidelink();return false;">Expand</asp:LinkButton>  
  </div>
  <div id="exp" style="display:none">
  <asp:LinkButton ID="collapse" runat="server" OnClientClick ="showlink();return false;">Collapse</asp:LinkButton>  
   </div>
  <asp:Panel ID="Panel1" runat="server" >
  <table>
    <tr>
        <td>                                                                     <%#Eval("LongDescription")%>
        </td>
     </tr>
  </table>

我的问题是只有第一条记录完成了它应该做的一切。 (展开/折叠)但其他行仅展开，不会隐藏 div 标签中的展开链接。它只是查找第一行的 id，因为当在任何其他行上点击展开按钮时，它会更改第一行以显示折叠链接。我该如何解决这个问题？

Answer 1

问题在于，由于有重复元素，DIV 的 id 被重用。这在 HTML 中是非法的。每个元素的 id 属性必须是唯一的。更好的处理方法是将当前元素的引用传递给处理程序，并让它通过遍历 DOM 派生出需要操作的元素。

<div>
   <asp:LinkButton ID="expand" runat="server" OnClientClick ="hidelink(this);return false;">Expand</asp:LinkButton>
</div>
<div style="display:none">
   <asp:LinkButton ID="collapse" runat="server" OnClientClick ="showlink(this);return false;">Collapse</asp:LinkButton>
</div>

注意:我在这些函数中使用 jQuery，因为它可以更轻松地遍历 DOM。如果您愿意，您可以使用自己的 DOM 遍历函数并设置样式属性来执行相同的操作。

function hidelink(ctl) {
    var myDiv = $(ctl).closest('div');
    myDiv.hide();
    myDiv.next('div').show();
}

function showlink(ctl){
    var myDiv = $(ctl).closest('div');
    myDiv.hide();
    myDiv.prev('div').show();
}