显示/隐藏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();
}

Answer 2

您需要为每一行使用唯一的ID。 ID仅可应用于页面中的一个元素，并且您的代码将一个ID应用于表中此大列的所有实例。

或者，您可以只使用DOM方法来定位要显示/隐藏的正确元素。 例如：

<div>
  <a href="#" onclick="showHideDesc(this); return false;">Expand</a>
  <table style="display: none;">
    <tr>
      <td><%#Eval("LongDescription")%></td>
    </tr>
  </table>
</div>

然后为您的脚本：

function showHideDesc(link) {
    var table = link.parentNode.getElementsByTagName("TABLE")[0];
    if (table.style.display == "none") {
        table.style.display = "";
        link.innerHTML = "Collapse";
    }
    else {
        table.style.display = "none";
        link.innerHTML = "Expand";
    }
}