jQuery toggle()与dblclick()改变显示为无

jQuery toggle() with dblclick() changing display to none

本文关键字：显示 改变 toggle jQuery dblclick      更新时间：2023-09-26

我创建了一个div，当我双击它时，它会将div的整个内容展开到全屏。现在我想在双击的时候切换它，让它回到原来的大小。

代码正在努力增加div大小，但是一旦添加了toggle()函数，当我第一次双击时，它现在将显示更改为none。我想我只是不正确地使用了toggle，但我无法弄清楚如何使其工作。

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

我相信这就是你想要的:

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

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

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
}
相关文章：