javascript - jQuery ToggleClass 到全屏

Question

我正在尝试使用 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;   
}

提前致谢!

Answer 1

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

而是使用 $(this) 的值，它是双击的目标对象(包装在 JQuery 对象中以便于使用):

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