使用Javascript打开和关闭覆盖

我有一个名为“导航栏菜单”的div。单击时，我希望div“nav_overlay”淡入，然后再次单击时，我希望它淡入不可见

目前，我已经将div'nav_overlay'设置为'display:none'，然后使用下面的javascript，当单击“navbar_菜单”时，它会自动显示出来

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

标签“nav ul”只是一个在单击“导航栏菜单”时滑动的菜单。要点是在菜单滑出时覆盖内容，然后当菜单再次滑入时，覆盖消失

我想我需要一个if语句来测试div是否可见？我只是想知道是否有人可以帮助解决这个问题

非常感谢

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

---

这应该可以测试某个元素是否可见，但html的链接或JSFIDLE也会很有帮助。

假设CSS类“showing”只会使元素出现。您可以使用.toggle函数使其自行隐藏并重新出现

---

像这样的方法应该会奏效：

$("#nav_overlay").fadeToggle()

有关选项，请参见

---

PS：我假设覆盖层有必要的样式，可以用position:fixed或其他东西覆盖整个页面。

你能发布相应的HTML和（甚至更好）吗把它们放在一个JSFIDLE中？对不起，这里有一个链接ti JSFIDLE为例：请原谅字母“a”…被符号字体替换。我试图在单击时也用“B”替换字母“a”…然后让它再次切换。如果有任何帮助，也将不胜感激。谢谢。我在这里创建了一个关于JSFIDLE的示例：请原谅字母“A”…被符号字体替换。我正在尝试在单击时将“A”替换为“B”…然后让它再次切换。对此的任何帮助都将不胜感激。如果您真的想使用伪元素方法，这是可以做的最多的。否则，您可以使用JS更改锚的文本内容。非常感谢。我尝试过在jquery中使用.text方法，如下所示：。这种方法比伪方法好吗？

$（“.menu\u图标”）.text（）==“a”？$（“.menu\u图标”）。text（“B”）：$（“.menu\u图标”）。text（“a”）

我最终使用了这个似乎有效的方法。再次感谢。类“显示”不会影响覆盖。我希望覆盖最初是不可见的，所以我将其设置为“显示：无”。我只想在单击“导航栏”菜单时打开和关闭它“。我试过你建议的，但它似乎没有开关。它会打开然后保持打开状态。下面是我在JSFIDLE上完成的一个示例的链接：

$("#nav_overlay").fadeToggle()