如何隱藏父母 <li> 如果所有的孩子都隱藏在jQuery中

Question

我是Jquery新手

我的網頁結構是這樣的

 <div id="MenuSection">
    <ul>
       <li>Master                 // Main Menu
           <ul>
               <li>Master1</li>
               <li>Master2</li>
               <li>Master3</li>
           </ul>
       </li>
       <li>Transaction            // Main Menu
           <ul>
               <li>Transaction1</li>
               <li>Transaction2</li>
               <li>Transaction3</li>
           </ul>
       </li>
       <li>Report                 // Main Menu
          <ul>
              <li>Report1</li>
              <li>Report2</li>
              <li>Report3</li>
          </ul>
       </li>
   </ul>
   </div>

我希望當任何父項（主菜單）的所有子項都隱藏時，父項也應隱藏。 假設如果Report1，Report2，Report3被隱藏，則“ Report”的父項也應被隱藏。

我如何通過Jquery實現呢？

Answer 1

一種方法是遍歷每個主菜單li以查看其所有子元素是否都是：visible ：

$("#MenuSection>ul>li").each(function() {
  if ($(this).find(">ul>li:visible").length == 0) {
    $(this).hide();
  }
});

還有其他方法可以做到這一點，例如使用.filter或.map，但這應該可以滿足您的需求。

給定嵌套的ul ，上述使用>確保僅處理直接ul>li子級。 如果您有多個級別，則可能需要進行相應的更改，例如，對於第一個： #MenuSection li將應用於所有li ，而第二個.find(">ul>li:visible")僅查看直接li子級。

 $("#MenuSection>ul>li").each(function() { if ($(this).find("li:visible").length == 0) { $(this).hide(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="MenuSection"> <ul> <li>Master <ul> <li>Master1</li> <li>Master2</li> <li>Master3</li> </ul> </li> <li>Transaction <ul> <li>Transaction1</li> <li>Transaction2</li> <li>Transaction3</li> </ul> </li> <li>Report <ul> <li style='display:none'>Report1</li> <li style='display:none'>Report2</li> <li style='display:none'>Report3</li> </ul> </li> </ul> </div> 

Answer 2

JavaScript相當簡單。 您需要對此進行擴展，以在每次隱藏或顯示列表項時對相關列表中的每個列表執行此檢查。

function isHidden(array) {
  for(var i = 0; i < array.length - 1; i++) {
    if(array[i+1].style.display != "none") {
        return false;
    };
  };
  return true;
};

var children = document.getElementById("report").getElementsByTagName("LI");
if (isHidden(children)) {
  document.getElementById("report").style.display = "none";
};

Answer 3

您可以使用.is（'：visible'）

看代碼：

 (function($) { $(document).ready(function() { var $mainLinks = $('#MenuSection > ul > li'); $.each($mainLinks, function() { if (!$(this).find('li').is(':visible')) { $(this).hide(); } }); }); })(jQuery); 

 #MenuSection > ul > li:last-child li { display: none; } #MenuSection > ul > li:first-child li:first-child { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="MenuSection"> <ul> <li>Master // Main Menu <ul> <li>Master1</li> <li>Master2</li> <li>Master3</li> </ul> </li> <li>Transaction // Main Menu <ul> <li>Transaction1</li> <li>Transaction2</li> <li>Transaction3</li> </ul> </li> <li>Report // Main Menu <ul> <li>Report1</li> <li>Report2</li> <li>Report3</li> </ul> </li> </ul> </div>