如何在带有锚或链接按钮的中继器中使用SlideToogle？

Question

我有一个中继器，锚标签和div标签在里面。锚点有一个执行滑动切换的jquery。但是举个例子，如果我在repeater中有5个项目，div count也是5，当我点击锚点时，所有的div都在进行滑动切换。

如果我使用itemcommand，这是可以的，但这次js不能工作。因为我使用的是linkbutton，而且如你所知它没有点击事件。那么，有什么解决方案可以解决这个问题吗？这是我的中继器和js。

<head runat="server">
    <title></title>
    <script src="jquery-1.8.4.js"></script>
    <script src="jquery-ui-1.9.2.custom.js"></script>
    <script src="jquery-ui-1.9.2.custom.min.js"></script>
    <script>
        $(function () {
            $('[id*=aNotice]').click(function () {
                $('[id*=dvContent]').slideToggle(400);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Repeater ID="rptNotice" runat="server">
                <ItemTemplate>
                    <a id="aNotice" runat="server">click to see toggle</a>
                    <div id="dvContent" runat="server"><%#Eval("content") %></div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>

Answer 1

您可以使用next方法：

$(function () {
     $('[id*=aNotice]').click(function () {
          $(this).next('div').slideToggle(400);
     });
});

请注意，ID必须是唯一的，使用$('[id*=aNotice]')过于夸张，您应该使用类来代替。

$('.aNotice').click(function (event) {
     event.preventDefault()
     $(this).next('div').slideToggle(400);
});

而且还需要加载两次jQuery UI，jquery-ui-1.9.2.custom.min.js只是jquery-ui-1.9.2.custom.js的简化版本。

<script src="jquery-ui-1.9.2.custom.js"></script>
<!-- <script src="jquery-ui-1.9.2.custom.min.js"></script> -->