Javascript Onclick不是'；如果没有注册，请一直告诉我'；没有定义_Javascript_Jquery_Html_Animation

Javascript Onclick不是'；如果没有注册，请一直告诉我'；没有定义

javascript jquery html animation

Javascript Onclick不是'；如果没有注册，请一直告诉我'；没有定义,javascript,jquery,html,animation,Javascript,Jquery,Html,Animation,每当点击“菜单”图标时，我都会尝试让菜单滑入。现在我看不出我错在哪里了。控制台中出现“菜单未定义”错误 <!DOCTYPE html> <html> <head> <title>Menu rechts</title> <link href="style.css" rel="stylesheet" type="text/css"> <link href="https://fonts.goog

每当点击“菜单”图标时，我都会尝试让菜单滑入。现在我看不出我错在哪里了。控制台中出现“菜单未定义”错误

<!DOCTYPE html>
<html>
<head>
    <title>Menu rechts</title>
    <link href="style.css" rel="stylesheet" type="text/css">
       <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
       <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
    <section class="web_wrapper">
        <header>
            <main style="width: 100%;">
                <button class="material-icons" id="menu_toggle" onclick="menu()">menu</button>
            </main>
        </header>
    </section>
    <section class="menu_show">
        <nav style="right: -20%;">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        <nav>
    </section>
<script src"toggle.js" type="text/javascript"></script>
</body>
</html>

css 在收到评论后，似乎这可能是一个css问题。因为这个原因，我也发布了css

* {
  font-size: 12pt;
  padding: 0px;
  margin: 0px;
  outline: 0;
  border: 0; }

body {
  width: 100%;
  color: #212121; }

a {
  text-decoration: none; }

li {
  list-style-type: none; }

.web_wrapper {
  float: left;
  width: 100%;
  height: auto; }

header {
  width: 100%;
  height: 100%; }
  header main {
    height: 75px; }
    header main button#menu_toggle.material-icons {
      position: relative;
      top: 50px;
      left: 1000px;
      background: transparent;
      transition: transform 0.3s, color 0.3s;
      font-size: 24pt !important; }
    header main button.active {
      transform: rotate(90deg);
      color: #536DFE; }

.menu_show {
  height: 100vh;
  float: right;
  background: #607D8B; }
  .menu_show nav {
    width: 20%; }
    .menu_show nav ul {
      width: 100%; }
      .menu_show nav ul li {
        width: 100%;
        text-align: center; }

使用

在您的代码顶部，然后再次检查。

理想情况下，您需要使用jQuery，但我也是一个JS迷。在这里，您只需在调用菜单函数之前的任何地方定义菜单函数，理想情况下，在标题部分，检查这把小提琴


功能菜单（）
{
警报（“dsff”）；
var菜单=document.querySelector（“nav”）；
var main=document.querySelector（“main”）；
如果（menu.style.right！='-20%'）
{
menu.style.right='-20%'；
main.style.width='100%'；
}
其他的
{
menu.style.right='0%'；
main.style.width='80%'；
}
}

首先，下次请修改代码

第二，我认为这把小提琴能满足你的需要：

JSFIDDLE:

您应该将CSS选择器与.querySelector（）一起使用

尝试将id=“nav”添加到navhtml元素中，并相应地在js中编辑选择器

在HTML文件中：

<nav id="nav" style="right: -20%;">

请参阅：如需参考，请尝试以下操作

您只需使用jQuery

animate

函数将其存档即可

读这个

var click=0//保留此标志以标识单击
功能菜单（）{
变量菜单=$（“nav”）；
$（菜单）。设置动画({
宽度：“切换”
}“慢”、“慢”、“慢”；
如果（单击==0）{
$（“.web_包装”）.animate（{“width”：“100%”}，“slow”，“easeOutElastic”）；
单击=1；
}否则{
$（“.web_包装”）.animate（{“width”：“80%”}，“slow”，“easeOutElastic”）；
单击=0；
}
console.log（单击）；
}

nav{
颜色：“黑色”；
背景色：#ddd；
文本对齐：对齐；
宽度：20%；
浮动：对；
利润上限：-20px；
}
.web_包装器{
宽度：80%；
背景颜色：红色
}


菜单

一,
二,
三,
四,

巨大的代码墙即将出现，请做好准备。请注意，我将“菜单”按钮移动到“菜单”部分。我也改变了很多css。不确定文本是否在应该的时候改变颜色。javascript现在只需在主体上切换一个

菜单\u show

类，css处理其余部分。。。我♥ html5


* {
字号：12号；
填充：0px；
边际：0px；
大纲：0；
边界：0；
}
身体{
宽度：100%；
颜色：#212121；
}
a{
文字装饰：无；
}
李{
列表样式类型：无；
}
部分{
显示：内联块；
}
.web_包装器{
过渡：.3s；
浮动：左；
宽度：95%；
高度：自动；
}
.menu\u show.web\u包装{
宽度：80%；
}
.菜单{
位置：绝对位置；
右：0px；
宽度：5%；
溢出：隐藏；
身高：100%；
过渡：宽度3s；
背景#607D8B；
}
.menu\u show.menu{
溢出：显示；
宽度：20%；
}
.菜单导航{
位置：相对位置；
顶部：30px；
空白：nowrap；
}
.菜单显示.菜单导航{
空白：正常；
顶部：10px；
}
.菜单显示.菜单导航ul{
宽度：100%；
}
.菜单显示.菜单导航ul li{
宽度：100%；
文本对齐：居中；
}
#菜单切换{
文本对齐：左对齐；
溢出：隐藏；
位置：相对位置；
背景：透明；
过渡：0.3s；
字体大小：12pt！重要；
变换：旋转（90度）；
顶部：20px；
右：10px；
}
.menu_显示。menu#menu_切换{
颜色：#536DFE；
顶部：0px；
右：0px；
变换：旋转（0度）；
}
//控制台日志留在科学中
功能就绪（fn）{
console.log（'readying'）；
如果（document.readyState！=“正在加载”）{
log（'loading…'）；
fn（）；
}否则{
console.log（“未加载内容”）；
文件。addEventListener（'DOMContentLoaded'，fn）；
}
}
就绪（函数（）{
var body=document.querySelector（“body”）；
var button=document.getElementById（“菜单切换”）；
var menushow=false；
按钮。addEventListener（“单击”，切换菜单）；
函数切换菜单（）
{
如果（菜单显示===真）
{
body.classList.remove（'menu_show'）；
}
其他的
{
body.classList.add（'menu_show'）；
}
Menushow=！Menushow；
}
});
一些内容
这一段还有更多
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人都受到谴责
 <script src"toggle.js" type="text/javascript"></script>

<head>
<script>
function menu()
{
    alert('dsff');
  var menu = document.querySelector("nav");
  var main = document.querySelector("main");

  if(menu.style.right != '-20%')
  {
      menu.style.right='-20%';
      main.style.width='100%';
  }
  else
  {
      menu.style.right='0%';
      main.style.width='80%';
  }
}
</script>
</head>

$('#menu_toggle').click(function()
{
  var menu = $("nav")
  var main = $("main")

  if(menu.css('right') !== '-20%')
  {
      menu.css('right','-20%')
      main.css('width','100%')
      //Just for test without your css:
      menu.css('margin-left','20%')
  }
  else
  {
      menu.css('right','0%')
      main.css('width','80%')
      //This is also the part of the test
      menu.css('margin-left','0%')
  }
 });

<nav id="nav" style="right: -20%;">

var menu = document.querySelector("#nav");

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <style type='text/css'>
            * {
                font-size: 12pt;
                padding: 0px;
                margin: 0px;
                outline: 0;
                border: 0;
            }

            body {
                width: 100%;
                color: #212121;
            }

            a {
                text-decoration: none;
            }

            li {
                list-style-type: none;
            }
            section {
                display: inline-block;
            }

            .web_wrapper {
                transition: .3s;
                float: left;
                width: 95%;
                height: auto;
            }

            .menu_show .web_wrapper {
                width:80%;
            }

            .menu {
                position: absolute;
                right: 0px;
                width: 5%;
                overflow: hidden;
                height: 100%;
                transition: width .3s;
                background: #607D8B;
            }
            .menu_show .menu {
                overflow: show;
                width: 20%;
            }

            .menu nav {
                position: relative;
                top: 30px;
                white-space: nowrap;
            }
            .menu_show .menu nav {
                white-space: normal;
                top: 10px;
            }
            .menu_show .menu nav ul {
                width: 100%;
            }
            .menu_show .menu nav ul li {
                width: 100%;
                text-align: center;
            }

            #menu_toggle {
                text-align: left;
                overflow: hidden;
                position: relative;
                background: transparent;
                transition: 0.3s;
                font-size: 12pt !important;
                transform: rotate(90deg);
                top: 20px;
                right: 10px;
            }
            .menu_show .menu #menu_toggle {
                color: #536DFE;
                top: 0px;
                right: 0px;
                transform: rotate(0deg);
            }
        </style>
        <script type='text/javascript'>
        // console logs left in for science
        function ready(fn) {
            console.log('readying');
            if (document.readyState != 'loading'){
                console.log('loading...');
                fn();
            } else {
                console.log('content not loaded');
                document.addEventListener('DOMContentLoaded', fn);
            }
        }
        ready(function() {
            var body = document.querySelector("body");
            var button = document.getElementById('menu_toggle');
            var menuShowing = false;
            button.addEventListener('click',toggleMenu);

            function toggleMenu()
            {
                if(menuShowing === true)
                {
                    body.classList.remove('menu_show');
                }
                else
                {
                    body.classList.add('menu_show');
                }
                menuShowing = !menuShowing;
            }
        });
        </script>
    </head>
    <body>
        <section class="web_wrapper">
            <main>
                Some content
                <p>more in this paragraph!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </main>
        </section>
        <section class="menu">
            <button class="material-icons" id="menu_toggle">menu</button>
            <nav>
                <ul>
                    <li>1. This is some long stinking text</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </nav>
        </section>
    </body>
</html>