如何使用jquery或alternative隐藏div？

Question

好的，这是我的代码：

HTML

<div id="wrap_all">
<header id="header" class="header_color light_bg_color mobile_drop_down" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div id="overlay-2"></div>
<div id="main">
</div>

CSS：

#overlay-2 {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background: none repeat scroll 0 0 #000000;
opacity: 0.85;  
z-index: 10;
visibility: hidden;
}

JS

$('.custom_class_1').click(function()    {
    $('#overlay-2').fadeIn(300);
    });

当我点击我的按钮".custom_class_1“时，我想切换#overlay-2的可见性。

我该怎么做？不确定visibility: hidden是否是进入css的路线。但我确实希望它隐藏在页面加载，因为它将覆盖整个屏幕的黑暗覆盖。

任何帮助都将不胜感激！谢谢

Answer 1

这应该是可行的：

$('.custom_class_1').click(function()    {
       $('#overlay-2').toggle();
    });

在您的主css中，正如其他人所建议的，您应该使用Display: none来代替Visibility: hidden。

Answer 2

如果您正在使用JQuery，那么使用.hide()方法：

$(“#over-2”).hide()；

http://api.jquery.com/hide/

Answer 3

使用display: none;而不是visibility: hidden;