尝试使移动菜单架正常工作

Question

我试图让一个简单的移动导航正常工作，但是单击触发按钮时什么也没发生。 任何帮助将非常感激！ 我使用JS的第一步，如果我犯了一个非常愚蠢的错误，我深表歉意...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <title>Mobile Menu</title>    
    <script>
        // When trigger is clicked, check if menu is currently hidden or shown
        // Choose what action to perform

        $('#trigger').click( function() {
            if ($('#menu').hasClass('menu-hide')) {
                showMenu();
            }
            else {
                hideMenu();
            }
        });

        function showMenu() {
            $('#menu').removeClass('menu-hide').addClass('menu-show');
        }

        function hideMenu() {
            $('#menu').removeClass('menu-show').addClass('menu-hide');
        }    
    </script>

    <style>  
        #menu {
            position: fixed;
            top: 0px;
            left: -200px;
            width: 200px;
            height: 100vh;
            transition: left 0.2s ease-in-out;
            background-color: #484848;
        }

        .menu-show {
            left: 0px;
        } 

        #trigger {
            position: absolute; 
            top: 0;
            right: 0;
            cursor: pointer;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head> 
<body>
    <div id="trigger"></div>
    <div id="menu" class="menu-hide"></div>    
</body>

谢谢安德烈亚斯

Answer 1

首先，主代码必须位于ready函数中才能触发：

“ $（document）.ready（function（）{}”

其次，要使CSS起作用，您必须将左侧样式移为菜单隐藏

工作示例：

 $(document).ready(function() { $('#trigger').click(function() { if ($('#menu').hasClass('menu-hide')) { showMenu(); } else { hideMenu(); } }); }); function showMenu() { $('#menu').removeClass('menu-hide').addClass('menu-show'); } function hideMenu() { $('#menu').removeClass('menu-show').addClass('menu-hide'); } 

 #menu { position: fixed; top: 0px; width: 200px; height: 100vh; transition: left 0.2s ease-in-out; background-color: #484848; } .menu-show { left: 0px; } .menu-hide { left: -200px; } #trigger { position: absolute; top: 0; right: 0; cursor: pointer; width: 50px; height: 50px; background-color: red; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <title>Mobile Menu</title> </head> <body> <div id="trigger"></div> <div id="menu" class="menu-hide"></div> </body> </html>