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

Question

I am new in Jquery

My Webpage structure is like this

 <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>

I want that when all the children of any Parent(main menu) are hidden, Parent should also be hidden. Let's say if Report1, Report2, Report3 are hidden then Parent that is "Report" should also be hidden.

How can I achieve this through Jquery ?

Answer 1

One way is to iterate over each main menu li to see if its children are all :visible :

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

there are other ways to do this, such as using .filter or .map, but this should get you what you need.

Given the nested ul 's the above uses > to ensure only the directly ul>li children are processed. If you have multiple levels, you might need to change accordingly, eg for the first: #MenuSection li would apply to all li s and the second .find(">ul>li:visible") only looks at direct li children.

 $("#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 does it fairly easy. You would need expand on this to execute this check every on the relevant list every time you hide or show a list item.

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

You can use the the .is(':visible')

See the code:

 (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>