javascript - 如果所有子级都隐藏在 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>