Question

我有一个名为“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是否可见？我只是想知道是否有人可以为此提供最佳解决方案。

非常感谢。

Answer 1

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

那应该测试某些内容是否可见，但是你的html链接或jsfiddle也会有所帮助。

Answer 2

假设CSS类'显示'仅使元素出现。您可以使用.toggle功能使其隐藏并重新出现。

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");

Answer 3

这样的事情应该有效：

$("#nav_overlay").fadeToggle()

有关选项，请参阅documentation。

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

使用Javascript打开和关闭叠加层

3 个答案: