使用Jquery显示/隐藏数据列表中的div

我用asp做了一个项目，但有些东西不起作用……我试图显示/隐藏数据列表中的div。但不幸的是，它只在第一个元素中工作，而我要隐藏的div的其他元素出现了

这是我的密码：

`<script type="text/javascript">

    $(function () {
        $("#hiden").hide();
        $("#showddiv").on("click", function () {
            $("#hiden").toggle();
        });
    });

</script>
<div id="mainReferences">
    <asp:DataList ID="DataList1" runat="server" CellPadding="4" 
        ForeColor="#333333">
        <AlternatingItemStyle BackColor="#2E2E2E" />
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <ItemStyle BackColor="#151515" />
        <ItemTemplate>

           <table cellspacing="20">
           <tr>
           <td><a href="#" id="showddiv" class="fontText"  title="drop the div down"><img src='<%# Eval("Mainfoto") %>'  width="320px" height="290px" /> </a></td>
           <td width="400px"> 
               <asp:Label ID="Label1" class="FontText" Font-Bold="true" runat="server" Text="Përshkrimi:"></asp:Label><br />
               <asp:Label ID="Label2" width="400px" class="FontText" Font-Size="Large" runat="server" Text='<%# Eval("pershkrimi") %>' ></asp:Label></td>
           </tr>
           </table>


            <div id="hiden" class="categorry">             </div>  
        </ItemTemplate>
        <SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    </asp:DataList>`

`
$（函数（）{
$（“#hiden”）.hide（）；
$（“#showddiv”）。在（“单击”，函数（）{
$（“#隐藏”）.toggle（）；
});
});


`

你应该试试这个

更新：

应该是这样的：

<ItemTemplate>
    <table cellspacing="20">
        <tr>
            <td>
                <a href="#" class="showddiv" class="fontText"  title="drop the div down"><img src='<%# Eval("Mainfoto") %>'  width="320px" height="290px" /> </a>
            </td>
            <td width="400px"> 
                <asp:Label ID="Label1" class="FontText" Font-Bold="true" runat="server" Text="Përshkrimi:"></asp:Label><br />
                <asp:Label ID="Label2" width="400px" class="FontText" Font-Size="Large" runat="server" Text='<%# Eval("pershkrimi") %>' ></asp:Label>
            </td>
        </tr>
    </table>

    <div id="hiden" class="categorry">
    </div>
</ItemTemplate>


$(document).ready(function () {
    $(".categorry").hide();

    $(".showddiv").on("click", function () {
        $(this).closest('table').parent().find(".categorry").toggle();
    });
});

$(this).closest('div').find('.hiden').toggle();

$（文档）.ready（函数（）{
$（“.category”）.hide（）；
$（“.showddiv”）。在（“单击”，函数（）{
$（this）.closest（'table'）.parent（）.find（“.category”）.toggle（）；
});
});

您正在HTML中使用

id

值。这是无效的标记，可能会导致未定义的行为（可能因浏览器而异）。请注意这个元素：

<div id="hiden" class="categorry">

然后只需更改jQuery选择器：

$('.hiden')

当然，现在还需要明确标识要切换的元素。可以通过从单击的元素稍微遍历DOM来实现这一点。大概是这样的：

<ItemTemplate>
    <table cellspacing="20">
        <tr>
            <td>
                <a href="#" class="showddiv" class="fontText"  title="drop the div down"><img src='<%# Eval("Mainfoto") %>'  width="320px" height="290px" /> </a>
            </td>
            <td width="400px"> 
                <asp:Label ID="Label1" class="FontText" Font-Bold="true" runat="server" Text="Përshkrimi:"></asp:Label><br />
                <asp:Label ID="Label2" width="400px" class="FontText" Font-Size="Large" runat="server" Text='<%# Eval("pershkrimi") %>' ></asp:Label>
            </td>
        </tr>
    </table>

    <div id="hiden" class="categorry">
    </div>
</ItemTemplate>


$(document).ready(function () {
    $(".categorry").hide();

    $(".showddiv").on("click", function () {
        $(this).closest('table').parent().find(".categorry").toggle();
    });
});

$(this).closest('div').find('.hiden').toggle();

这是一个示例，因为我不知道服务器端代码产生的呈现标记。本质上，

.closest（）

中的选择器应该引用标记中包装该特定数据列表项的父元素。这基本上是查找：被单击的元素->它和要切换的元素之间的公共父元素->要切换的元素

（当然，同样的修复也需要应用于您复制

id

值的任何其他地方，您在代码中多次这样做。）

---

id

s在DOM中必须是唯一的<代码>类es可以重复使用。

两者没有区别。我只是要求这样做，因为我在代码中没有看到任何其他问题@DavidSorry隐藏的ID正在重复。这就是问题所在。非常感谢这些评论，它真的帮助了我。我还想知道一些其他的事情。。。当我点击某人打开div时，它会将我跳到页面顶部，那么如何保持打开的位置呢？非常感谢。again@Hariss：这是因为

href=“#”

，它告诉浏览器转到页面顶部。理想情况下，您不应该为此使用“链接”，因为您实际上没有链接到任何东西。最好使用按钮之类的东西，并将其样式设置为链接。必要时，您可以使用

href=“javascript:void（0）；”

，但这不是一个好的做法。顺便说一句，这个答案也不适用。它将显示数据列表中所有项目的隐藏div。@IrfanTahirKheli:捕捉得好。我更新了答案以反映这一点。