Jquery 如果可见则显示另一个 div，否则隐藏

Question

当大型菜单处于活动状态时，我正在尝试覆盖整个页面。 我正在尝试这样的事情：

function overlay_toggle() {

        if ($('.mega-sub-menu').css("visibility") == "hidden") {

            $('#twc-page-overlay').css({ "visibility": "hidden" });
        }

        else {
            $('#twc-page-overlay').css({ "visibility": "visible" });
        }

    }

目前它正在做这项工作。 任何想法我在这里缺少什么？

谢谢！

HTML 是这样的：

<header>
   <nav>
      <ul>
         <li>
            <ul class="mega-sub-menu"></ul>
         </li>
      </ul>
   </nav>
</header>

<div id="twc-page-overlay"></div>

Answer 1

这是行不通的，只是用.is(":visible")检查知名度， .show()使它可见和.hide()来隐藏它

 if ($('.mega-sub-menu').is(":visible") === false) { $('#twc-page-overlay').hide(); } else { $('#twc-page-overlay').show(); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <nav> <ul> <li> <ul class="mega-sub-menu"> <li>Heheh</li> </ul> </li> </ul> </nav> </header> <div id="twc-page-overlay">Hello</div>

Answer 2

您可以将其写在一行中：

$('#twc-page-overlay').toggle($('.mega-sub-menu').is(':visible'));

如果你想使用visibility而不是display ，你可以用 toggleClass 做同样的事情：

.hidden { visibility: hidden; }

$('#twc-page-overlay').toggleClass('hidden', $('.mega-sub-menu').is(':hidden'));

.toggleClass() 和 .toggle() 都接受一个布尔值来分别应用/删除或显示/隐藏。