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）一旦頁面加載，看看你的作品，然後在更新代碼的腳本標籤相應地。