【发布时间】:2013-09-02 04:42:16
【问题描述】:
我一直在为一个带有 HTML 和 Javascript 的网站构建一个弹出菜单,并且我设法获得了一个按钮来创建一个弹出 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”中的“yellow”一词只是为了确定div在页面上的位置,因为弹出菜单是分层完成的。 2-按钮脚本是页面上唯一运行的脚本,也是整个网站。 3- 我只对 Javascript 和 HTML 的答案感兴趣,并且它现在适用于所有浏览器,或者几乎所有浏览器。
【问题讨论】:
-
您没有使用
display:none隐藏div有什么具体原因吗??
标签: javascript html menu navigation sidebar