jQuery toggle（）与dblclick（）将显示更改为none

Question

我创建了一个div，当我双击它时，它会将div的全部内容扩展为全屏。我现在希望能够在双击时切换它，使其恢复到原始大小。

代码正在努力增加div大小，但是一旦添加了toggle（）函数，它现在会在我第一次双击时将显示更改为none。我假设我只是错误地使用切换，但我无法弄清楚如何使其工作。

HTML

<div class="popout-box">
  <button id="btnShow">Wallboard</button>
    <div class='menu' style='display: none'>
    <div id="framewrap">
    <button id="btnHide">Close</button><br/>
      <iframe id="frame" src="https://url.com">
      </iframe>
    </div>
    </div>
    </div>
</div>

JQUERY

$(document).ready(function(){
    $("#framewrap").dblclick(function(){
        $("#framewrap").toggle().css({"width":"100%","height":"100%","position":"fixed","left":"0px","right":"0px","top":"5px","bottom":"0px"});
        });
    });

CSS

#framewrap {
    background-color:#1886c5;
    overflow:hidden;
    box-shadow: 0px 2px 10px #333;
}
#frame {
    width:100%;
    height:100%;
    background-color:#1886c5;
}
.popout-box {
    width: 400px;
    height: 300px;
}

.menu {
    position: absolute;
    right: 15px;
}

Answer 1

我相信这就是你所追求的：

$(document).ready(function(){
    $("#framewrap").dblclick(function(){
        $(this).toggleClass('newClass');
    });
});

CSS：

.newClass
{
     width:100%,
     height:100%,
     ...
     ...
 }

Answer 2

的jQuery

$(document).ready(function() {
    $("#framewrap").on('dblclick', function() {
        $("#framewrap").toggleClass('fixed');
    });
});

CSS

.fixed { 
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    right:0;
    top:5px;
    bottom:0
}