Javascript 正在尝试让移动菜单架工作_Javascript_Jquery

Javascript 正在尝试让移动菜单架工作

javascript jquery

Javascript 正在尝试让移动菜单架工作,javascript,jquery,Javascript,Jquery,我试图让一个简单的移动导航工作，但当我点击触发按钮时，什么也没有发生。任何帮助都将不胜感激！我在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中的第一步，所以如果我犯了一个非常愚蠢的错误，我道歉

<!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>


移动菜单
//单击触发器时，检查菜单当前是否隐藏或显示
//选择要执行的操作
$（“#触发器”）。单击（函数（）{
if（$（'#menu'）.hasClass（'menu-hide'））{
showMenu（）；
}
否则{
hideMenu（）；
}
});
函数showMenu（）{
$（'#menu'）.removeClass（'menu-hide'）.addClass（'menu-show'）；
}
函数hideMenu（）{
$（'#menu'）.removeClass（'menu-show'）.addClass（'menu-hide'）；
}    
#菜单{
位置：固定；
顶部：0px；
左：-200px；
宽度：200px；
高度：100vh；
过渡：左0.2秒缓进缓出；
背景色：#4848；
}
.菜单展示{
左：0px；
} 
#触发{
位置：绝对位置；
排名：0；
右：0；
光标：指针；
宽度：50px；
高度：50px；
背景色：红色；
}

谢谢

Andreas

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

“$（文档）.ready（函数（）{}”

第二，为了让CSS工作，你必须将左边的样式移动到菜单隐藏

工作示例：

$（文档）.ready（函数（）{
$（“#触发器”）。单击（函数（）{
if（$（'#menu'）.hasClass（'menu-hide'））{
showMenu（）；
}否则{
hideMenu（）；
}
});
});
函数showMenu（）{
$（'#menu'）.removeClass（'menu-hide'）.addClass（'menu-show'）；
}
函数hideMenu（）{
$（'#menu'）.removeClass（'menu-show'）.addClass（'menu-hide'）；
}

#菜单{
位置：固定；
顶部：0px；
宽度：200px；
高度：100vh；
过渡：左0.2秒缓进缓出；
背景色：#4848；
}
.菜单展示{
左：0px；
}
.菜单隐藏{
左：-200px；
}
#触发{
位置：绝对位置；
排名：0；
右：0；
光标：指针；
宽度：50px；
高度：50px；
背景色：红色；
}


移动菜单