使用Javascript打开和关闭覆盖

Using Javascript to toggle an overlay on and off

本文关键字：覆盖 Javascript 使用      更新时间：2023-09-26

我有一个名为"navbar_menu"的div。单击时，我希望div"nav_overlay"淡入，然后再次单击时，希望它淡入不可见。

目前，我已将div"nav_overlay"设置为"display:none"，然后使用以下javascript，当单击"navbar_menu"时，它会显示出来。

$(document).ready(function(){
  $(".navbar_menu").click(function(){
    $("nav ul").toggleClass("showing");
      $("#nav_overlay").fadeTo("fast", 0.8);
  });
});

标签"nav ul"只是单击"navbar_menu"时滑动的菜单。关键是当菜单滑出时，要有一个覆盖内容的覆盖层，然后当菜单再次滑入时，覆盖层就会消失。

我想我需要一个if语句来测试div是否可见？我只是想知道是否有人能为这件事提供最好的解决方案。

非常感谢。

这样的东西应该可以工作：

$("#nav_overlay").fadeToggle()

有关选项，请参阅文档。

PS：我假设覆盖层有必要的样式来覆盖整个页面的位置：固定或其他什么。

if( $('#your-element').is(":visible") ){
    // #your-element is visible.
} else {
    // #your-element is not visible
}

这应该测试一些东西是否可见，但到html的链接或jsfiddle也会有所帮助。

假设CSS类"showing"只会使元素出现。您可以使用.thoggle函数使其单独隐藏和重新显示。

http://api.jquery.com/toggle/

http://api.jquery.com/fadetoggle/

// Will automatically hide/display element
$("nav ul").toggle();
// Same as toggle but with fade effect
$("#nav_overlay").fadeToggle("fast");
相关文章：