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>

我希望在隐藏任何Parent（主菜单）的所有子项时，也应该隐藏Parent。让我们说一下，如果报告Report1，Report2，Report3，那么父母就是＆＃34;报告＆＃34;也应该隐藏起来。

我如何通过Jquery实现这一目标？

Answer 1

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 2

您可以使用.is(':visible')

参见代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果所有子项都隐藏在jquery中，如何隐藏父<li>

2 个答案: