Таблица с несколькими уровнями наследования - JQuery

Question

У меня есть класс проекта и наследование идет Проекты имеют разделы, группы разделов и группы имеют задачи. Теперь я показываю все это в таблице. Таблица создается с использованием этого кода.

<table class="table table-condensed table-hover" border="1"> 
    <tr style="background-color: black; color: white"> 
     <th></th> 
     <th>Manual/Group/Section</th> 
     <th>Task</th> 
     <th>Delete</th> 
    </tr> 
    @foreach (Manual manual in ViewBag.mlist) 
    { 
     <tr class="manualHeader no-hover jd-green"> 
      <th style="text-align:center"><input type="checkbox" /></th> 
      <th>Manual Name @manual.name</th> 
      <th></th> 
      <th style="text-align:center"><button>Add Section</button></th> 
     </tr> 
     foreach (Section sections in @manual.sections) 
     { 
      <tr class="sectionHeader no-hover jd-yellow"> 
       <th style="text-align:center"><input type="checkbox" /></th> 
       <th>Section Name : @sections.name</th> 
       <th></th> 
       <th style="text-align:center"><button>Add Group</button></th> 
      </tr> 
      foreach (Group group in @sections.groups) 
      { 
       <tr class="groupHeader no-hover jd-gray"> 
        <th style="text-align:center"><input type="checkbox" /></th> 
        <th>Group Name : @group.name</th> 
        <th></th> 
        <th style="text-align:center"><button>Add Task</button></th> 
       </tr> 
       foreach (Task task in @group.tasks) 
       { 
        <tr> 
         <th style="text-align:center"><input type="checkbox" /></th> 
         <th></th> 
         <th>Task Name:<input type="text" style="width:100%" value="@task.name" name="@task.name" /></th> 
         <th></th> 
        </tr> 
       } 
      } 
     } 
    } 
</table> 

Сценарий я использую для обработки переключая состоит из этого кода

<script> 
    $(document).ready(function() { 
     $(".manualHeader").click(function() { 
      $(this).nextUntil(".manualHeader").toggle(); 
     }); 
     $(".sectionHeader").click(function() { $(this).nextUntil(".manualHeader, .sectionHeader").toggle(); }); 
     $(".groupHeader").click(function() { $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").toggle(); }); 
    }); 
</script> 

Теперь я понимаю, почему он не работает должным образом, когда вы переключаетесь позволяет сказать, что группа так все задачи по он скрыт, затем вы переключаете руководство, в котором находится эта группа, и все, кроме задач, которые были скрыты, нажав на группу ранее. И я понимаю, почему это происходит из-за использования toggle() с untilNext() в моем скрипте. Мой вопрос заключается в том, как я могу исправить это с помощью какого-то условного выражения, чтобы проверить видимость или что-то еще.

Answer 1

<script> 
    $(document).ready(function() { 
     $(".manualHeader").click(function() { 
      var anyHidden = false; 
      var allHidden = true; 
      $(this).nextUntil(".manualHeader").each(function() { 
       if ($(this).is(":visible")) 
        allHidden = false; 
      }); 
      if (allHidden) 
       $(this).nextUntil(".manualHeader").each(function() { 
        if ($(this).is(".sectionHeader")) 
         $(this).show(); 
       }); 
      else 
       $(this).nextUntil(".manualHeader").hide(); 
     }); 
     $(".sectionHeader").click(function() { 
      var anyHidden = false; 
      var allHidden = true; 
      $(this).nextUntil(".manualHeader, .sectionHeader").each(function() { 
       if ($(this).is(":visible")) 
        allHidden = false; 
      }); 
      if (allHidden) 
       $(this).nextUntil(".manualHeader, .sectionHeader").each(function() { 
        if ($(this).is(".groupHeader")) 
         $(this).show(); 
       }); 
      else 
       $(this).nextUntil(".manualHeader, .sectionHeader").hide(); 
     }); 
     $(".groupHeader").click(function() { 
      var anyHidden = false; 
      var allHidden = true; 
      $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").each(function() { 
       if ($(this).is(":visible")) 
        allHidden = false; 
      }); 
      if (allHidden) 
       $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").show(); 
      else 
       $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").hide(); 
     }); 
    }); 
</script> 

Это работает, чтобы сделать то, что хотел сделать