jquery - jQuery slideToggle（）不起作用

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>only<th>中，<tr>并且<td>被允许，我认为你<tbody>应该看起来像这样：

<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);or$(this).closest(".content").slideToggle(500);替换$(this).next("p").slideToggle(500);

如果这些不起作用，您可以尝试使用 uniqueid而不是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 代码是在页面上加载/呈现数据“之后”运行的吗？

您可以尝试“直播”而不是“点击”吗？所以这会将您的 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