Javascript jQuery将类切换为全屏

我试图使用jQuery的toggleClass（）单击一个div，并将该div扩展到100%的高度和宽度（换句话说，全屏）。我以为这很容易，但出于某种原因，我正在努力。今天早上一定很累。。。下面的代码切换为100%高度和宽度，但不会切换回原始大小

HTML

CSS

提前谢谢

我想你的意思是：

$("#s3div1").toggleClass("overlay").toggleClass("s3div1");
   ^-- # instead of .

一旦您切换类

。s3div1

将不再匹配，因此第二次单击dblclick时不会发生任何事情

去散散步，喝点咖啡，吃个橙子。

我想你的意思是：

$("#s3div1").toggleClass("overlay").toggleClass("s3div1");
   ^-- # instead of .

一旦您切换类

。s3div1

将不再匹配，因此第二次单击dblclick时不会发生任何事情

---

去散步，喝点咖啡，吃个橙子。

您是通过类名而不是双击事件所引用的对象来引用的

而是使用$（this）的值，这是双击的目标对象（包装在JQuery对象中以便于使用）：

---

您正在按类名而不是双击事件所引用的对象进行引用

而是使用$（this）的值，这是双击的目标对象（包装在JQuery对象中以便于使用）：

.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;   
}

$("#s3div1").toggleClass("overlay").toggleClass("s3div1");
   ^-- # instead of .

$("div#s3div1").dblclick(function (event) {
   $(this).toggleClass("overlay").toggleClass("s3div1");
});