如何隐藏父母 <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>