1

私は HTML と Javascript を使用して Web サイトのポップアウト メニューを作成してきましたが、ボタンを閉じて内部にボタンがあるポップアウト div コンテナーを作成するためのボタンを取得することができました。最終的にはボタンが増えたり、いろいろなものが出てくるでしょうが、今のところはシンプルにしています。Javascript は私の得意分野ではありません。すべてのボタンが適切に機能し、div を非表示にしている現在の問題は、「閉じる」ボタンを押すと div が消えるのに、その中の要素が消えないことです。「メニュー」ボタン（ポップアウトdivが表示される）がアクティブになったときに、ポップアウトdiv内の要素を非表示または削除するif elseスクリプトを作成できることを願っています。それを理解し始めるために、私は' メニューボタンが押されたときに実行されるスクリプトがアクティブかどうかを検出できるスクリプトが必要です。説明が下手で申し訳ありませんが、関連するコードを以下に貼り付けます。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- ボタン スクリプトは、ページ上で実行される唯一のスクリプトであり、Web サイト全体です。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 に答える