当用户点击菜单按钮时，我该如何让一个菜单弹出？

Question

当用户点击菜单按钮时，我该如何让一个菜单弹出？

3

我是新手，对web开发没有太多经验。我一直在尝试创建一个当用户点击时变得可见的菜单。我已经成功让它弹出来了，但是它并不能保持可见状态。它只能显示一秒钟就又消失了。我也尝试使用"display"属性，但结果也是一样。这是我的代码：

<head>
<script type="text/javascript">
    function opnmenu () {
        document.getElementById("menu").style.visibility="visible";
    }
</script>
</head>
<body onLoad="document.getElementById('menu').style.visibility='hidden';">
    <div id="menubar">
        <table>
            <tr>
                <td>
                    <div id="menuimg">
                        <form>
                            <input type="image" class="menubut" src="menu.png" alt="submit" onClick="opnmenu()">
                        </form>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <br>
    <h1> Entrepreneur</h1>
    <hr>
    <div id="menu">
        <ul>
            <li>Home</li>
            <li>Motivation</li>
            <li>Books</li>
            <li>Videos</li>
        </ul>
    </div>
</body>

非常感谢您的提问，我们很乐意为您提供帮助。

谢谢！

- Anon512

3

你希望我为你翻译，这句话的意思是“你想要这个链接吗？”请确认是否正确。 - Dhaval Marthak

你是在页面加载完成之前点击图像输入吗？ - Nate Whittaker

1

http://jsfiddle.net/jC9Qd/1/ - João Paulo Macedo

摆脱表单 - 它会重新加载当前页面。 - Ivan Ivanov

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Niflhel · Accepted Answer

这里有一个使用纯JavaScript的示例（某些代码来自其他评论），并且采用更合适的HTML5格式：
http://jsfiddle.net/59su4/1/

visibility: hidden 的问题在于，如果菜单可见，它将占据本应该显示的位置。以下是使用 visibility 属性的示例：
http://jsfiddle.net/59su4/2/

（请注意隐藏菜单占据的空白区域）

[编辑] 根据作者的评论，我将HTML、JS和CSS混合到了单个代码中，以显示每个元素在页面中的位置。

完整页面

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My menu is ALIVEEEE</title>
        
        <style>
            .menu {
                display: none;   
            }
            
            .menu.opened {
                display: block;
            }
        </style>
    </head>
    
    <body>
        <a href="" class="open-menu">Toggle menu</a>
        
        <nav class="menu">
            <ul>
                <li>Home</li>
                <li>Motivation</li>
                <li>Books</li>
                <li>Videos</li>
            </ul>
        </nav>
        
        <p>
            To facilitate the process, AI Lab hackers had built a system that displayed both the "source" and "display" modes on a split screen. Despite this innovative hack, switching from mode to mode was still a nuisance.
        </p>
        
        <script>
            var openMenuBtn = document.getElementsByClassName('open-menu')[0],
                menu        = document.getElementsByClassName('menu')[0];
            
            openMenuBtn.addEventListener('click', function ( e ) {
                // We don't want the empty link to be followed
                e.preventDefault();
                // Toggle the menu
                menu.classList.toggle('opened');
            }, false);
        </script>
    </body>
</html>