如何在樹布局中切換隱藏和顯示子元素？

Question

這是我的 html 代碼，它需要一些更新，例如 span 或可以讓它隱藏所有子元素以僅在單個父級單擊時顯示子級的東西。

如何添加切換跨度和 javascript 以使其在單擊時僅顯示每個父級的特定子級，而不是一次顯示所有父級。

我是 javascript 的初學者，所以不知道如何做到這一點，請幫助我如何解決這個問題，它將挽救我的生命。 非常感謝

<div class=" col-lg-4 col-md-9 col-sm-8" id="Permission">
<ul id="Div1" class="tree">
  <li class="has">
     <input type="checkbox" name="Dashboard" value="yes"> Dashboard  
     <ul> </ul>
  </li>
</ul>
<ul id="Div2" class="tree">
  <li class="has" "="">
     <input type="checkbox" name="Master" value="yes"> Master  
     <ul>
        <li>
           <input type="checkbox" id="Upper1  name=" menus-accesscontrol[9]"="" value="9"> AccessControl 
           <ul id="Parent1">
              <li>
                 <input type="checkbox" name="Menus-User[3]" value="3"> User 
                 <ul class="childs">
                    <li><input type="checkbox" name="UserAllowCreate" value="0"> Allow Create</li>
                    <li><input type="checkbox" name="UserAllowDelete" value="0"> Allow Delete </li>
                    <li><input type="checkbox" name="UserAllowEdit" value="0"> Allow Edit </li>
                    <li><input type="checkbox" name="UserAllowView" value="0"> Allow View </li>
                 </ul>
              </li>
              <li>
                 <input type="checkbox" name="Menus-Menu[6]" value="6"> Menu 
                 <ul class="childs">
                    <li><input type="checkbox" name="MenuAllowCreate" value="0"> Allow Create</li>
                    <li><input type="checkbox" name="MenuAllowDelete" value="0"> Allow Delete </li>
                    <li><input type="checkbox" name="MenuAllowEdit" value="0"> Allow Edit </li>
                    <li><input type="checkbox" name="MenuAllowView" value="0"> Allow View </li>
                 </ul>
              </li>
              <li>
                 <input type="checkbox" name="Menus-Group[23]" value="23"> Group 
                 <ul class="childs">
                    <li><input type="checkbox" name="GroupAllowCreate" value="0"> Allow Create</li>
                    <li><input type="checkbox" name="GroupAllowDelete" value="0"> Allow Delete </li>
                    <li><input type="checkbox" name="GroupAllowEdit" value="0"> Allow Edit </li>
                    <li><input type="checkbox" name="GroupAllowView" value="0"> Allow View </li>
                 </ul>
              </li>
           </ul>
        <li class="has parentCheckBox">
           <input type="checkbox" name="Menus-CustomerMaster[2]" value="2"> CustomerMaster 
           <ul class="childs">
              <li><input type="checkbox" name="CustomerMasterAllowCreate" value="0"> Allow Create</li>
              <li><input type="checkbox" name="CustomerMasterAllowDelete" value="0"> Allow Delete</li>
              <li><input type="checkbox" name="CustomerMasterAllowEdit" value="0"> Allow Edit</li>
              <li><input type="checkbox" name="CustomerMasterAllowView" value="0"> Allow View</li>
           </ul>
        </li>
        
        </li> 
     </ul>
  </li>
 </ul>
 <ul id="Div3" class="tree">
  <li class="has" "="">
     <input type="checkbox" name="Inventory" value="yes"> Inventory  
     <ul>
        <li class="has parentCheckBox">
           <input type="checkbox" name="Menus-UserRecharge[8]" value="8"> UserRecharge 
           <ul class="childs">
              <li><input type="checkbox" name="UserRechargeAllowCreate" value="0"> Allow Create</li>
              <li><input type="checkbox" name="UserRechargeAllowDelete" value="0"> Allow Delete</li>
              <li><input type="checkbox" name="UserRechargeAllowEdit" value="0"> Allow Edit</li>
              <li><input type="checkbox" name="UserRechargeAllowView" value="0"> Allow View</li>
           </ul>
        <li class="has parentCheckBox">
           <input type="checkbox" name="Menus-SupplierInventory[43]" value="43"> SupplierInventory 
           <ul class="childs">
              <li><input type="checkbox" name="SupplierInventoryAllowCreate" value="0"> Allow Create</li>
              <li><input type="checkbox" name="SupplierInventoryAllowDelete" value="0"> Allow Delete</li>
              <li><input type="checkbox" name="SupplierInventoryAllowEdit" value="0"> Allow Edit</li>
              <li><input type="checkbox" name="SupplierInventoryAllowView" value="0"> Allow View</li>
           </ul>
        <li>
           <input type="checkbox" id="Upper2  name=" menus-report[30]"="" value="30"> Report 
           <ul id="Parent2">
              <li>
                 <input type="checkbox" name="Menus-CustomerException[31]" value="31"> CustomerException 
                 <ul class="childs">
                    <li><input type="checkbox" name="CustomerExceptionAllowCreate" value="0"> Allow Create</li>
                    <li><input type="checkbox" name="CustomerExceptionAllowDelete" value="0"> Allow Delete </li>
                    <li><input type="checkbox" name="CustomerExceptionAllowEdit" value="0"> Allow Edit </li>
                    <li><input type="checkbox" name="CustomerExceptionAllowView" value="0"> Allow View </li>
                 </ul>
              </li>
              <li>
                 <input type="checkbox" name="Menus-SuplierException[33]" value="33"> SuplierException 
                 <ul class="childs">
                    <li><input type="checkbox" name="SuplierExceptionAllowCreate" value="0"> Allow Create</li>
                    <li><input type="checkbox" name="SuplierExceptionAllowDelete" value="0"> Allow Delete </li>
                    <li><input type="checkbox" name="SuplierExceptionAllowEdit" value="0"> Allow Edit </li>
                    <li><input type="checkbox" name="SuplierExceptionAllowView" value="0"> Allow View </li>
                 </ul>
              </li>
              <li>
                 <input type="checkbox" name="Menus-SupplierReport[34]" value="34"> SupplierReport 
                 <ul class="childs">
                    <li><input type="checkbox" name="SupplierReportAllowCreate" value="0"> Allow Create</li>
                    <li><input type="checkbox" name="SupplierReportAllowDelete" value="0"> Allow Delete </li>
                    <li><input type="checkbox" name="SupplierReportAllowEdit" value="0"> Allow Edit </li>
                    <li><input type="checkbox" name="SupplierReportAllowView" value="0"> Allow View </li>
                 </ul>
              </li>
              <li>
                 <input type="checkbox" name="Menus-SenderSupplierSummary[35]" value="35"> SenderSupplierSummary 
                 <ul class="childs">
                    <li><input type="checkbox" name="SenderSupplierSummaryAllowCreate" value="0"> Allow Create</li>
                    <li><input type="checkbox" name="SenderSupplierSummaryAllowDelete" value="0"> Allow Delete </li>
                    <li><input type="checkbox" name="SenderSupplierSummaryAllowEdit" value="0"> Allow Edit </li>
                    <li><input type="checkbox" name="SenderSupplierSummaryAllowView" value="0"> Allow View </li>
                 </ul>
              </li>
              <li>
                 <input type="checkbox" name="Menus-MonthlySale[39]" value="39"> MonthlySale 
                 <ul class="childs">
                    <li><input type="checkbox" name="MonthlySaleAllowCreate" value="0"> Allow Create</li>
                    <li><input type="checkbox" name="MonthlySaleAllowDelete" value="0"> Allow Delete </li>
                    <li><input type="checkbox" name="MonthlySaleAllowEdit" value="0"> Allow Edit </li>
                    <li><input type="checkbox" name="MonthlySaleAllowView" value="0"> Allow View </li>
                 </ul>
              </li>
           </ul>
        </li>
        </li> </li> </li> </li> </li> </li> </li> </li> </li> </li>
     </ul>
  </li>
  </ul>
  <ul id="Div4" class="tree">
  <li class="has" "="">
     <input type="checkbox" name="Invoice" value="yes"> Invoice  
     <ul>
        <li class="has parentCheckBox">
           <input type="checkbox" name="Menus-CustomerInvoice[44]" value="44"> CustomerInvoice 
           <ul class="childs">
              <li><input type="checkbox" name="CustomerInvoiceAllowCreate" value="0"> Allow Create</li>
              <li><input type="checkbox" name="CustomerInvoiceAllowDelete" value="0"> Allow Delete</li>
              <li><input type="checkbox" name="CustomerInvoiceAllowEdit" value="0"> Allow Edit</li>
              <li><input type="checkbox" name="CustomerInvoiceAllowView" value="0"> Allow View</li>
           </ul>
        </li>
     </ul>
  </li>
  </ul>
  <ul id="Div5" class="tree">
  <li class="has" "="">
     <input type="checkbox" name="Contract Management" value="yes"> Contract Management  
     <ul>
        <li class="has parentCheckBox">
           <input type="checkbox" name="Menus-Configuration[45]" value="45"> Configuration 
           <ul class="childs">
              <li><input type="checkbox" name="ConfigurationAllowCreate" value="0"> Allow Create</li>
              <li><input type="checkbox" name="ConfigurationAllowDelete" value="0"> Allow Delete</li>
              <li><input type="checkbox" name="ConfigurationAllowEdit" value="0"> Allow Edit</li>
              <li><input type="checkbox" name="ConfigurationAllowView" value="0"> Allow View</li>
           </ul>
        <li class="has parentCheckBox">
           <input type="checkbox" name="Menus-Contract[47]" value="47"> Contract 
           <ul class="childs">
              <li><input type="checkbox" name="ContractAllowCreate" value="0"> Allow Create</li>
              <li><input type="checkbox" name="ContractAllowDelete" value="0"> Allow Delete</li>
              <li><input type="checkbox" name="ContractAllowEdit" value="0"> Allow Edit</li>
              <li><input type="checkbox" name="ContractAllowView" value="0"> Allow View</li>
           </ul>
        </li>
        </li>
     </ul>
   </li>
  </ul>
 </div> 

Answer 1

您可以在 jQuery 中使用“toggleClass”，盡管根據您的需要還有其他方法。 但是您可以檢查這個基本示例，以便您有一個想法。

$(".root").on("click", function(){
    $(this).find("ul").toggleClass("hide-children");
  })

樣品 1 小提琴： https://jsfiddle.net/nq5ecbLu/1/
樣本 2 小提琴： https://jsfiddle.net/mt10aeg7/