Question

我有一个视图，其中与表和表关联的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

存在多个问题，

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

然后你的最终代码将是，

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

注意：您应该将所有ID更改为类名，包括＆＃34; configName＆＃34;

在div上单击切换动态创建的表

1 个答案: