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

如果您使用的是JQuery，请使用.hide（）方法：

$（ “＃覆盖-2”）隐藏（）;

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

Answer 2

使用display: none;代替visibility: hidden;

Answer 3

这应该有效：

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

在您的主要CSS中，正如其他人建议您使用Display: none代替Visibility: hidden

Answer 4

这是一个纯CSS解决方案 - FIDDLE

HTML

<input type='checkbox' id='inputstyle'></input>

<div class='centerme'>
<label for="inputstyle"><span>Click Me</span></label>
</div>

<div class='hideme'></div>

CSS

.centerme {
    width: 80px;
    margin: 0px auto;
}
.hideme {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 10px auto;
}
.clickme:active > .hideme {
    display: none;
}
input[type=checkbox]:checked ~ .hideme {
   display: none;
}
input[type=checkbox] {
   display: none;
}
input[type="checkbox"] + div label span {
    display:inline-block;
    width:80px;
    height:30px;
    background-color: gray;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    line-height: 30px;
    color: white;
    text-align: center;
}

来自THIS精彩页面。

如何用jquery或替代隐藏div？

4 个答案: