javascript - 隐藏其他 div 时如何使 div 占用 100% 宽度
问题描述
这个想法是当第二个隐藏<图表>时,一个div占据屏幕<地图>的100% 。另外我想知道为什么当我点击输入标签时它会密切执行该功能并且不等待按钮被点击。
function hidechart() {
var x = document.getElementById("chart");
if (x.style.display === "none") {
x.style.display = "block";
}
else {
x.style.display = "none";
}
};
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
.leaflet-container {
position: fixed;
width: 50%;
height: 100%;
}
#chart{
position:absolute;
width: 50%;
height: 50px;
top:2%;
right:0;
}
<div id="map" ></div>
<div class="btn-group" style="position:fixed">
<button onclick="hidechart()" >Graficas</button>
<button type="button" id="alldep" class="btn" >Todos</button>
</div>
<form id="form" onsubmit="return false;">
<input style="position:fixed; top:0%; left:14%; width:10%;" type="text" onfocus="this.value=''" id="userInput" />
<button style="position:fixed; top:0%; left:5%; width:8%;",stype="button" onclick="query();">Consultar</button>
</form>
<div id="chart" align="right">
<div class="row">
<div id="chart-area"></div>
</div>
</div>
解决方案
这是您正在寻找的按钮功能吗?
var map = document.getElementById("map");
var chart = document.getElementById("chart");
function hideChart() {
chart.classList.add("hide");
}
function query() {
alert("query");
}
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
.leaflet-container {
position: fixed;
width: 100%;
height: 100%;
}
#map {
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
width: 100%;
}
#chart{
position:absolute;
text-align: center;
height: 50%;
left: 0;
right: 0;
bottom: 0;
background-color: #efefef;
right:0;
width: 100%;
z-index: 1;
}
#chart.hide {
opacity: 0;
transition: opacity .5s ease-out;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
<div class="container">
<div id="map" ></div>
<div class="btn-group" style="position:fixed">
<button onclick="hideChart()" >Graficas</button>
<button type="button" id="alldep" class="btn" >Todos</button>
</div>
<form id="form" onsubmit="return false;">
<input type="text" onfocus="this.value=''" id="userInput" />
<button type="button" onclick="query();">Consultar</button>
</form>
<div id="chart" align="right">
<div class="row">
<div id="chart-area">
<h1>This is where the chart is</h1>
</div>
</div>
</div>
</div>
推荐阅读
- react-native - 排按反应原生
- vue.js - fetch() 方法在 Nuxtjs 的组件中使用时抛出错误
- python - 我已经定义了一个带有属性的类,但是当我输入一个测试代码时,它没有返回任何东西
- regex - 如何使用正则表达式 vscode 找出 Python 函数定义
- c++ - 在没有与号 (&) 运算符的 C++ 中获取内存地址
- javascript - 我试图从这里删除空间
- c++ - C++ 模板专业化/部分和完整
- html - div部分背景图片透明度,继承body背景图片
- c++ - 如何显示猜测数字的尝试
- javascript - 是否可以使用一个简单的函数来处理多个 useState 挂钩?