Question

我有一个从视图动态生成的下表。我需要在class=heading上添加点击事件，以显示或隐藏class=content。

<table>
<thead>
    <tr>
        <th class="thead">Function</th>
        <th  class="thead"">Type</th>
        @foreach (var item in Model.PackageNames)
        {
            <th class="thead">
                @item
            </th>
        }
    </tr>
</thead>
<tbody>
    @foreach (var item in Model.PrivilegeGroups)
    {
        <tr>
            <td colspan="50">
                <div class="heading">
                    @item.Name
                </div>
            </td>
        </tr>
        <text>
            <p class="content">
                @foreach (var privilege in item.Privileges.Values)
                {
                    <tr>
                        <td>
                            @privilege.Name
                        </td>
                        <td>
                            @privilege.Type.ToString()
                        </td>
                        @foreach (var package in privilege.Packages)
                        {
                           <td>
                                @package.AccessLevel.ToString()
                           </td>
                        }
                    </tr>
                }
            </p>
        </text>
    }
</tbody>
</table>

这是我正在使用的jQuery，但它不起作用。

<script type="text/javascript">
    $(document).ready(function () {
        $(".heading").click(function () {
            $(this).next(".content").slideToggle(500);
        });
    });   // -- End Ready
</script>

但是，$('.content').slideToggle();确实有效，并使用class=content切换所有元素。我想只隐藏下一个元素。我如何使它工作？

感谢。

Answer 1

首先，由于只允许<tbody> <th>，<tr>和<td>，我认为你的<tbody>应该是这样的：< / p>

<tbody>
    @foreach (var item in Model.PrivilegeGroups)
    {
        <tr>
            <td colspan="50" class="heading">
                @item.Name
            </td>
        </tr>
        <tr class="content">          
            @foreach (var privilege in item.Privileges.Values)
            {
                <td>
                    @privilege.Name
                </td>
                <td>
                    @privilege.Type.ToString()
                </td>
                @foreach (var package in privilege.Packages)
                {
                    <td>
                        @package.AccessLevel.ToString()
                    </td>
                }
            }
         </tr>
    }
</tbody>

我对javascript不太满意，但我认为你可以尝试用$(this).next(".content").slideToggle(500);或$(this).closest(".content").slideToggle(500);替换$(this).next("p").slideToggle(500);

如果这些不起作用，您可以尝试使用唯一的id代替class，如下所示：

<tbody>
    @{ int i = 0; }
    @foreach (var item in Model.PrivilegeGroups)
    {
        <tr>
            <td colspan="50" class="heading">
                @item.Name
            </td>
        </tr>
        <tr id="content@i">          
            @foreach (var privilege in item.Privileges.Values)
            {
                <td>
                    @privilege.Name
                </td>
                <td>
                    @privilege.Type.ToString()
                </td>
                @foreach (var package in privilege.Packages)
                {
                    <td>
                        @package.AccessLevel.ToString()
                    </td>
                }
            }
         </tr>
    @{ i++ } 
    }
</tbody>

然后相应地更新你的javascript。

就像我说的那样，我对javascript / jquery并不擅长，希望这会有所帮助。

Answer 2

你确定你的jquery代码是在＆＃39;之后运行的吗？数据已在页面上加载/呈现？

你能尝试生活吗？而不是点击＆＃39;？这样就可以将你的jquery代码改为

<script type="text/javascript">
    $(document).ready(function () {
        $(".heading").live('click', function () {
            $(this).next(".content").slideToggle(500);
        });
    });   // -- End Ready
</script>

检查的一种方法是在页面加载后运行firebug中的jquery代码（如果在FF中）并查看哪些内容适合您，然后相应地更新脚本标记中的代码。

Answer 3

非常感谢@Garrett Fogerlie和@saganbyte，我终于解决了这个问题，将class=heading从<td>移到<tr>，$(this).next(".content").slideToggle(500);现在就可以了！

@foreach (var item in Model.PrivilegeGroups ) {
        <tr class="heading">
            <td colspan="50">
                    @item.Name
            </td>
        </tr>
        <p class="content">
            @foreach (var privilege in item.Privileges.Values)
            {
                <tr>
                    <td class="thead">
                        @privilege.Name
---Rest of the code here

jQuery slideToggle（）不起作用

3 个答案: