我正在尝试使用jQuery的toggleClass()来单击div并让div扩展到100%的高度和宽度(换句话说,全屏) . 我认为这很容易,但出于某种原因,我正在努力 . 今天早上一定很累...下面的代码切换到100%的高度和宽度,但它不会切换回原始大小 .
HTML
<div class="s3div1" id="s3div1"></div>
JS
$("div#s3div1").dblclick(function (event) {
$(".s3div1").toggleClass("overlay").toggleClass("s3div1");
});
CSS
.overlay {
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
z-index:1000;
}
.s3div1 {
position: absolute;
z-index: 10;
top: 0px;
right: 25px;
height: 550px;
width: 225px;
border: 5px solid white;
border-radius: 25px;
float: right;
padding-right: 8%;
}
#s3div1 {
background-image: url('assets/volcano3.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
提前致谢!
2 回答
您正在按类名引用,而不是双击事件引用的对象 .
而是使用$(this)的值,它是双击的目标对象(包装在JQuery对象中以便于使用):
我想你的意思是:
一旦你切换类
.s3div1
将不再匹配所以第二次你dblclick什么都没发生 .去散步,喝点咖啡,吃橘子 .