Question

在我的ASP MVC 3视图的索引页面中，我有一个可能有多达50个元素的集合对象。为了保持用户的索引清洁，我试图在集合包含5个以上的项目时使用jQuery .slideToggle功能。

但是，我目前正在$(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>。由于这是索引页面，因此它们位于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>
        }

Answer 1

我建议将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来定位点击元素......

jQuery - 使用slideToggle功能渲染多个div元素

1 个答案: