javascript - Electron js - 在屏幕最大化之前，Divs 是不可点击的

问题描述

我有一些代码可以使 2 个 div 标签仅在单击另一个 div 时才可见（尝试制作自定义标题栏） 2 个 div 最初是不可见的。

const {remote} = require('electron');
var win = remote.getCurrentWindow();
win.setSize(810,610);
function max(){
    var win = remote.getCurrentWindow();
    
    if(win.isMaximized()){
        win.unmaximize();
        document.getElementById('file').style.right = "744px";
        document.getElementById('about_us').style.right = "664px";
    }else{
        win.maximize();
        document.getElementById('file').style.right = "1314px";
        document.getElementById('about_us').style.right = "1234px";
    }
    
}

hidden = true;
function get(el){
    return document.getElementById(el);
}
function open_file_menu(){
    var fileMenu = [get('file_menu'),get('file_menu2')];
    if (hidden == false){
        for (i = 0;i<fileMenu.length;i++){
            fileMenu[i].style.visibility = 'hidden';
            hidden = true;
        }
        
    }
    else{
        for (i = 0;i<fileMenu.length;i++){
            fileMenu[i].style.visibility = 'visible';
            hidden = false;
        }
    }
}

body,html{
  width: 47.5pc;
  height: 100pc;
  overflow: hidden;
  -webkit-app-region:drag; 
  z-index: 0;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: monospace;
  z-index: 1;
}
#container{
  width: 100pc;
  height: 100pc;
  display: block;
  position: absolute;
  right: 40px;
  top: 0;
  
}

#container nav{
  display: grid;
  width: 100pc;
  height: 2.2pc;
  background-color: #333333;
  z-index: 1;
}

span{
  position: absolute;
  top:0;
  transform: translateX(100px);
  color:#dacbcb;
  font-size: 1.5em;
  font-weight:bold;
  background-color: #222222;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 7px;
  padding-bottom: 6px;
  transition: ease-in-out 1ms;
  -webkit-app-region:no-drag; 
}
#buttons{
  position: absolute;
  right: 120px;
  
}
#maximize{
  transform: translateX(-124px);
}
#maximize span:hover,#minimize:hover span,.menu1:hover,.menu2:hover{
  background-color: #333333;
}
#file{
  position: absolute;
  right:743px;
}
#about_us{
  position: absolute;
  right:663px;

#run{
  transform: translateY(100px);
}
.menu1{
  font-size: 1.1em;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 10px;
  padding-bottom: 8px;
}
.menu2{
  font-size: 1.1em;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 10px;
  padding-bottom: 8px;
}
#file_menu{
  visibility: hidden;
  background-color: #222222;
  transform: translateY(34px);
  font-size: 1.1em;
}
#file_menu2{
  visibility: hidden;
  background-color: #222222;
  transform: translateY(63px);
  font-size: 1.1em;
  padding-left: 25px;
  padding-right: 17px;
  padding-top: 7px;
  padding-bottom: 6px;
}
.fm{
  z-index: 2;
}
#file_menu:hover,#file_menu2:hover{
  background-color: #333333;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="init.js"></script>
    <script src="text_editor.js"></script>
    <meta charset="UTF-8">
    <title>Extorc App</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div onclick="uff()">
      <span id = "file_menu" class = "fm">new</span> 
    </div>
    <div>
      <span id = "file_menu2" class = "fm">open</span> 
    </div>
    <div id="container">
      <nav>
        <div id="buttons">
          <div id="file" onclick="open_file_menu()">
            <span class = "menu1">file</span> 
          </div>
          <div id="about_us">
            <span class = "menu2">about..us</span>
          </div>
          <div id="maximize" onclick="max()">
            <span>+</span>
          </div>
        </div>
      </nav>
    </div>
  </body>
</html>

代码有效...菜单打开时显示 2 个 div，但 div 不可点击或可能完全被动（我:hover在我的 css 中设置了背景颜色）但是，如果我打开 2 个 div 然后最大化窗口..然后它们变得可交互，然后在最小化之后它们也可以工作，这意味着 div 最初是不可交互的，但是在最大化之后，它们可以工作......对此有任何修复......我应该在这里不使用可见性吗？

不仅通过全屏编辑fullscreen : true,，而且如果我调整窗口大小，按钮开始工作，并且启动窗口不起作用

标签： javascriptdomelectron

javascript - Electron js - 在屏幕最大化之前，Divs 是不可点击的 - 之后情况正常

问题描述

解决方案

推荐阅读