我一直在为一个带有HTML和Javascript的网站构建弹出菜单,我设法得到一个按钮来创建一个pop out div容器,里面有一个关闭它的按钮。最终会有更多的按钮和各种各样的东西,但我现在保持简单。让我说Javascript不是我的强项。我现在遇到的问题是我已经让所有按钮正常工作并隐藏了div,但是当我按下“关闭”按钮时div会消失,而其中的元素却没有。我希望我可以创建一个if else脚本,当“菜单”按钮(导致弹出div出现)被激活时,该脚本将隐藏或删除弹出div中的元素。为了开始搞清楚,我需要一个脚本来检测按下菜单按钮时运行的脚本是否处于活动状态。如果我解释得不好,我很抱歉,但相关代码粘贴在下面,希望这会有所帮助。是否有一个脚本可以检测是否正在运行另一个脚本,然后可以激活if else脚本?作为奖励,有没有人对可以有条件地隐藏(或删除)元素的脚本有任何想法?两者在一起很可爱:)
这是代码: HTML 和 Javascript -
<div>
<script>
function sidebar() {
x = document.getElementById("sbb")
x.style.width = "0";
x.style.position = "relative";
x = document.getElementById("sba")
x.style.width = "200px";
x.style.top = "0px";
x.style.bottom = "0px";
x.style.position = "absolute";
}
</script>
<script>
function closesb() {
x = document.getElementById("sba")
x.style.width = "0";
x.style.position = "relative";
}
</script>
<div style="width:100%; height:100; z-index:3">
<button type="button" onclick="sidebar()">MENU</button>
</div>
<div class="sidebar">
<div class="sba" id="sba">
<button type="button" onclick="closesb()">CLOSE</button>yellow</div>
<div class="sbb" id="sbb">yellow</div>
</div>
</div>
CSS -
.sidebar{
position: absolute;
z-index: 2;
margin: 0;
padding: 0;
border: 0;
}
.sba{
width:200px;
top:0px;
bottom:0px;
background-color:#787878;
opacity:.75;
position:absolute;
height:10em;
}
.sbb{
top:0px;
bottom:0px;
right:0px;
width:100%;
margin-left:200px;
height:100%;
position:absolute;
}
注意:
1- div中的“黄色”单词“sba”和“sbb”只是为了确定页面上div的位置,因为弹出菜单是分层完成的。 2-按钮脚本是页面上运行的唯一脚本,也是整个网站。 3-我只对Javascript和HTML中的答案感兴趣,并且现在适用于所有浏览器,或者几乎所有浏览器。
答案 0 :(得分:1)
function sidebar() {
x = document.getElementById("sba")
x.style.display = "block";
}
function closesb() {
x = document.getElementById("sba");
x.style.display = "none";
}
<div class="sba" id="sba" style="display:none">