1

在我的 ASP MVC 3 视图的索引页面中，我有一个集合对象，它可能有多达 50 个左右的元素。.slideToggle为了让用户的索引保持干净，当集合包含超过 5 个项目时，我尝试使用 jQuery功能。

但是，我目前正在这样做，$(document).ready并且由于我给<div>元素赋予了相同的名称，因此当您单击一个时，它们都会展开或折叠。

我是 jQuery 的新手，所以我想知道实现这个目标的最佳方法是什么，如果这个方法是一个很好的方法，如何只允许我点击折叠/展开的项目。

这是jQuery代码

    $(document).ready(function () {
        $(".hidden").hide();
        $(".expand").click(function () {
            $(".hidden").slideToggle("slow");

            if ($(".expand").html() == "[+] Expand") {
                $(".expand").html("[-] Collapse");
            } else {
                $(".expand").html("[+] Expand");
            }
        });
    });

这里是<div>'s。由于这是索引页，因此它们处于foreach循环中，因此对每条记录都重复（因此每条记录都被赋予相同的名称）。 

        @if (item.BankListAgentId.Count > 5)
        {
            <div class="expand">[+] Expand</div>
            <div class="hidden">
                @foreach (var thing in item.BankListAgentId)
                {
                    string value = thing.FixedOrVariable.Trim();
                    if (value.Equals("F"))
                    {
                        var agentId = thing.AgentId.Trim();
                        var link = ViewBag.Periscope + agentId;
                        <a href="@link" target="_blank">@thing.StateCode: @agentId</a>
                        <br />                     
                    }
                }                
            </div>
        }
4

1 回答 1

3

我建议将您的 jQuery 更改为：

$(document).ready(function () {
    $(".hidden").hide();
    $(".expand").click(function () {
        $(this).next(".hidden").slideToggle("slow");

        if ($(this).html() == "[+] Expand") {
            $(this).html("[-] Collapse");
        } else {
            $(this).html("[+] Expand");
        }
    });
});

这样，您将仅定位单击的.hidden元素旁边的元素.expand，也可以使用this而不是.expand仅定位单击的元素...

于 2013-04-16T21:24:32.743 回答