1

我一直在为一个带有 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 的答案感兴趣，并且现在可以在所有浏览器或几乎所有浏览器上使用。

4

1 回答 1

1

http://jsfiddle.net/jpEqt/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">
于 2013-09-02T05:01:29.030 回答