1. 首页
  2. 问答
  3. Onclick没有被注册，一直告诉我它是未定义的

Onclick没有被注册，一直告诉我它是未定义的

2015-10-04 62 views
3

我试图有一个菜单滑动，每当'菜单'图标被点击。现在我看不到我错了哪里。我在控制台中收到'menu is not defined'错误。Onclick没有被注册，一直告诉我它是未定义的

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

的使用JavaScript的

function menu() 
{ 
    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%'; 
    } 
}

得到的意见后，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; }

来源

2015-10-04 Robbin van der Jagt

+0

如果你已经加载jQuery，为什么不使用jQuery函数？ – Tushar

+0

我之前有过一个jQuery标记，但那让我很失望。我觉得用JavaScript更舒服，所以我回去试图解决问题 –

+1

尝试把功能代码放在部分 –

回答

2

尝试以下，

你可以简单的归档与此jQuery animate功能

阅读本animate

var click = 0; //keep this flag to identify the click 
 

 
function menu() { 
 

 
    var menu = $("nav"); 
 

 
    $(menu).animate({ 
 
    width: 'toggle' 
 
    },"slow","easeOutElastic"); 
 

 
    if (click == 0) { 
 
    $(".web_wrapper").animate({"width": "100%"},"slow","easeOutElastic"); 
 
    click = 1; 
 
    } else { 
 
    $(".web_wrapper").animate({"width": "80%"},"slow","easeOutElastic"); 
 
    click = 0; 
 
    } 
 

 
    console.log(click); 
 

 
}
nav { 
 
    color: 'black'; 
 
    background-color: #ddd; 
 
    text-align: justify; 
 
    width: 20%; 
 
    float: right; 
 
    margin-top: -20px; 
 
} 
 
.web_wrapper { 
 
    width: 80%; 
 
    background-color: red 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 

 
<section class="web_wrapper"> 
 
    <header> 
 
    <div style="width: 100%;" id="main"> 
 
     <button class="material-icons" id="menu_toggle" onclick="menu();">menu</button> 
 
    </div> 
 
    </header> 
 
</section> 
 
<section class="menu_show"> 
 
    <nav style="right:-20%;" id="nav"> 
 
    <ul> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
     <li>4</li> 
 
    </ul> 
 
    </nav> 
 
</section>

来源

2015-10-04 13:07:31 jlocker

+0

我试过了你的代码，它几乎我在找什么。菜单现在很好地移入和移出，就像它应该（非常感谢你）。但同样点击webste_wrap必须减少到80％。 –

+0

@RobbinvanderJagt欢迎您...如果我的回答很有用，请选择是答案..也为你的问题，你可以做同样的切换为'web_wrapper' .. – jlocker

+0

我已经标记你的评论作为答案。我正在尝试为web_wrapper创建切换。但切换不断变化显示：无;而不是只是改变宽度， –

0

使用

<script src"toggle.js" type="text/javascript"></script>

在你的代码的顶部，并再次检查。

来源

2015-10-04 12:22:28

0

理想，你需要使用jQuery，但我也是一个JS fan.Here你只需要在任何地方定义菜单的功能，但它的调用之前，最好在头部分，看看这个小提琴

http://jsfiddle.net/r0d09wcr/1/

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

来源

2015-10-04 12:22:48 sajanyamaha

+0

谢谢你的回应。错误现在确实消失了。可悲的是，JavaScript仍然没有让菜单出现onlick –

0

首先，下次请拨弄你的代码。

其次，我认为这拨弄你想要做什么： JSFIDDLE:http://jsfiddle.net/657oudrv/1/

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

来源

2015-10-04 12:25:17

+0

我已经在你的小提琴中添加了我自己的CSS（对于使用带有BuildOnSave包的scss的标记抱歉）。不，我不再有任何动作。我看不到我搞砸了。但我确实做了一些。 http://jsfiddle.net/657oudrv/3/ –

+0

@RobbinvanderJagt使用'位置：相对;'在'nav'元素 – Tushar

+0

@Tushar相对于我的导航标签添加。这似乎没有任何影响。 –

0

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

尝试添加ID = “导航” 来您的导航HTML元素并相应地编辑您在js中的选择器。

在HTML文件中：

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

在toogle.js：

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

看到：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector参考

来源

2015-10-04 13:05:45

+0

他的选择器已经选择了正确的元素 – Terminus

0

的代码大墙来了，准备自己。请注意，我将菜单按钮移动到菜单部分。我也改变了很多CSS。不知道文本是否应该改变颜色。 javascript现在只需切换一个menu_show类的身体和CSS处理其余的...I♥HTML5

The fiddle

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

我会解决任何错误并想办法解决任何评论。找出问题的最佳方法是从开发控制台中删除类，规则和w/e，看看会发生什么。

The fiddle

信贷，这是由于：

position: absolute; right: 0px; for animation to work right（也高度看起来不错，这一套）

就绪功能是关闭StackO ......无法找到答案我从现在开始拉:(

wikipedia for the lorem ipsum on the fiddle

来源

2015-10-04 18:07:42 Terminus

相关问题

 相关问题