jQuery slideToggle() не работает

Question

У меня есть следующая таблица, динамически генерируемая из представления. Мне нужно добавить событие click на 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, я, наконец, решить, переместив 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 

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

Вы уверены, что ваш код jquery запущен «после», данные загружены/отображены на странице?

Можете ли вы попробовать «жить» вместо «нажмите»? Так что бы изменить код JQuery для

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

Один способ проверить это запустить код JQuery в поджигатель (если в FF) после загрузки страницы и посмотреть, что работает для вас, а затем обновить код в ваш соответственно.