1

ボタン要素は、画像を含むポップアップ メニューを呼び出します。これは正しく機能します。display:none同じボタンを2回クリックした後にスタイルを変更する2番目のイベントリスナーを作成しようとしています。私が試したすべての組み合わせは、私がすでに行った作業を無効にするかキャンセルするようです. 私はJavascriptが初めてで、助けていただければ幸いです。

<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width;" />
<link href="scripts/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
    window.onload = function(n) {
        document.getElementById('menubutton').addEventListener("click", function({
            document.getElementById("mainmenu").style.display="block";}, false);
        }
</script>

</head>

<div align="center"><IMG SRC="images/m.index.png" WIDTH=640 HEIGHT=125></div>
<div align="center "id="menubutton"><img src="images/m.icon1.png">Main Menu</div>
<div id="mainmenu" style="display:none">
    <div class="row1">
        <a href='m.page1.html'><IMG SRC="images/m.icon2.png">Sub Menu 1</a>
    </div> 
    <div class="row2">
        <a href='m.page2.html'><IMG SRC="images/m.icon3.png">Sub Menu 2</a>
    </div> 
    <div class="row3">
        <a href='m.page3.html'><IMG SRC="images/m.icon4.png">Sub Menu 3</a>
    </div> 
</div>
</body>
</html>
4

2 に答える 2

2

2 番目のリスナーは必要ありません。メニューが表示されているかどうかを確認する必要があるものを使用してください。

document.getElementById('menubutton').addEventListener("click", function()
    {
        menu = document.getElementById("mainmenu");
        if (menu.style.display == "none") {
            document.getElementById("mainmenu").style.display="block";
        } else {
            document.getElementById("mainmenu").style.display="none";
        }
    }, false);

このjsfiddleを参照してください。

jquery を使用することもできます。これにより、ライブが少し簡単になります。次に、次のようになります。

$('#mainmenu').click(function() { $('#mainmenu').toggle() });
于 2013-06-06T10:37:34.823 に答える