Question

我有三个菜单，里面装满了复选框。我希望能够单击菜单上下滑动的每个菜单。有没有办法在下面的jquery html中执行此操作？

@foreach (string type in Model.ReportLists.Keys)
            { 

                <div id="flip"  class="type-container"  >

                    <h4>@type</h4>                   
                    <div  class="list-container" >
                        @Html.CheckBoxListFor(model => model.ReportLists[type].PostedItems.CBItemIds,
                                  model => model.ReportLists[type].AvailableItems,
                                  item => Model.convertName(item.Name),
                                  item => item.Name,
                                  model => model.ReportLists[type].SelectedItems,
                                  MvcCheckBoxList.Model.Position.Vertical)
                    </div>

                    </div>


           }

Answer 1

问题有点不清楚，但我认为这是你正在寻找的：

$(document).ready(function () {
    $('.type-container').each(function () {
        var $container = $(this);
        $container.find('h4').on('click', function () {
            $container.find('.list-container').slideToggle();
        });
    });
});

这也有效，可能会稍微提高效率：

$(document).ready(function () {
    $('.type-container h4').on('click', function () {
        $(this).closest('.type-container').find('.list-container').slideToggle();
    });
});

<强>更新

有趣。通过jsperf跑。似乎第二个版本对于初始化更有效，但第一个版本在实际切换复选框列表时效率更高。由于初始化是一次性费用，我建议使用第一个版本。

切换复选框列表MVC

1 个答案: