jquery - 在 div 单击时切换动态创建的表

Question

我有一个 View ，其中与表关联的 div 和表是动态创建的。我尝试使用 Jquery 来隐藏/显示 div，但只有第一个表被切换。我见过在表格行而不是整个表格上应用切换的示例。

HTML

<div class="col-md-10" id="main">
@foreach (var item in Model)
{ 
    <div id="ConfigName">
        <h3><b>@item.ConfigurationCollection.CollectionName</b></h3>
    </div>
    <div id="ConfigDetails" style="display:none">
    <table class="table">
        <tr>
            @foreach (var lis in item.ListConfiguration)
            {
                <th>@lis.Option.OptionName</th>
            }
        </tr>
        <tr>
            @foreach (var lis in item.ListConfiguration)
            {
                <td>
                    @foreach (var ov in lis.OptionValue)
                    {
                        @ov.OptionVal
                        <br />
                    }
                </td>
            }
        </tr>
    </table>            
    </div>
}

脚本(评论包括我尝试过的所有内容)

<script type="text/javascript">
$(document).ready(function () {
    $('#ConfigName').click(function () {
        //$('#ConfigDetails').slideToggle();
        //$(this).parent().find('#ConfigDetails').slideToggle();
        var closest = $(this).closest().find('#ConfigDetails').is(":visible");
        if(!closest)
        {
            $(this).find('$ConfigDetails').slideToggle();
        }

    });
});
</script>

Answer 1

有多个问题，

1. ID 应该是唯一的。您有多个具有相同 ID 的元素。您需要将其替换为类
2. .find('$ConfigDetails')，在这一行中你需要使用.而不是$(类选择器)。

那么你的最终代码将是，

 $('.ConfigName').click(function () {
     $(this).next().slideToggle();
 });

注意:你应该把所有的id都改成类名，包括“configName”