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

非常感谢您@Garrett Fogerlie和@saganbyte，我终于解决它通过移动从<td>内class=heading到<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 

Answer 2

首先，因为里面只有<tbody><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).closest(".content").slideToggle(500);或$(this).next("p").slideToggle(500);

更换$(this).next(".content").slideToggle(500);如果这些不工作，你可以尝试使用一种独特的id代替的像这样：

<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 3

你确定你的jquery代码是在'数据加载/渲染页面之后运行'吗？

你可以尝试'生活'，而不是'点击'？因此，这将改变你的jQuery代码到

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

一种方法来检查是运行在Firebug jQuery代码（如果FF）一旦页面加载，看看你的作品，然后在更新代码的脚本标签相应地。