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

首先，主要代码必须是内部就绪功能才能触发：

＆＃34; $（文件）.ready（function（）{}＆＃34;

其次，要使CSS工作，你必须将左侧样式移动到菜单隐藏

工作示例：

＆＃13;

$(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');
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

试图让移动菜单架工作

1 个答案: