JavaScript 添加事件监听器
[英]JavaScript addEventListener
问题描述
He Stackoverflow,
他 Stackoverflow，
Question is simple, If the window size is smaller than width 960px i can click a menu button.问题很简单，如果窗口大小小于宽度 960 像素，我可以单击菜单按钮。 When i click it the nav height will be 325px instead of 60px and thats what i wanted to happen.当我点击它时，导航高度将是 325 像素而不是 60 像素，这就是我想要发生的。 It works but, you only can see the result if you click the button for the second time.它有效，但只有第二次单击该按钮才能看到结果。 Can someone explain why this happens?有人可以解释为什么会发生这种情况吗？
// GET DOM var getdom = (function(){ var DOMstrings = { menuBtn: '#menu', navToggle: 'nav', } return { getDOMstrings: function(){ return { menu: document.querySelector(DOMstrings.menuBtn), nav: document.querySelector(DOMstrings.navToggle), } } } })(); // Global Controllor var global = (function(dom){ var get = dom.getDOMstrings(); function start(){ // MENU NAV HEIGHT get.menu.addEventListener('click', function(){ console.log('click!'); if(get.nav.style.height === '60px'){ get.nav.style.height = '325px'; }else { get.nav.style.height = '60px'; } }); } return { init: function(){ start(); } } })(getdom); global.init();
html, body { margin: 0; padding: 0; } #header { width: 100%; height: 150px; background-color: gray; } nav { width: 100%; height: 60px; text-align: center; font-family: 'Open Sans', sans-serif; overflow: hidden; transition: all 1s; } #brand { position: absolute; font-size: 32px; left: 10px; top: 8px; } #menu { position: absolute; left: 140px; top: 20px; display: none; cursor: pointer; } nav ul { list-style-type: none; padding-top: 15px; } nav ul li { display: inline; font-size: 22px; } nav ul li a { text-decoration: none; color: darkslategray; border-right: 1px solid black; padding: 10px 11px; transition: all 0.5s; } .nav-link:hover { font-size: 24px; } #dropdown { padding-left: 10px; cursor: pointer; transition: all 0.5s; } @media screen and (max-width: 965px) { nav { height: 325px; } } @media screen and (max-width: 960px) { nav ul li { display: block; border-bottom: 1px solid black; padding-bottom: 10px; padding-top: 10px; margin-left: -10%; } .margintop { margin-top: 50px; } nav ul li a { border-right: 0px; padding: 0px; } #dropdown { padding-left: 0px; } } @media screen and (max-width: 959px){ nav { height: 60px; } #menu { display: block; } }
<html> <head> <link rel="stylesheet" href="style.css"> <title>Website</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="bootstrap.min.css"> </head> <nav> <div id="brand">BRAND</div> <div id="menu">MENU</div> <ul> <li class="margintop"><a href="#" class="nav-link">Home</a></li> <li><a href="#" class='nav-link'>About us</a></li> <li><a href="#" class='nav-link'>Services</a></li> <li><a href="#" class='nav-link'>Contact</a></li> <li id="dropdown" class='nav-link'>More</li> </ul> </nav> <header id="header"> </header> <script src="app.js"></script> </html>
1 个解决方案
解决方案1
2 已采纳 2017-02-11 18:57:22
You need to use get.nav.getBoundingClientRect().height to get the initial height value.您需要使用get.nav.getBoundingClientRect().height来获取初始高度值。
So in this case you can compare "real" value with your points (325 or 60).因此，在这种情况下，您可以将“真实”价值与您的积分（325 或 60）进行比较。
As @squint mentioned in comments, you can't rely on style's height property.正如@squint在评论中提到的，你不能依赖 style 的 height 属性。 Try to go with getBoundingClientRect ( MDN ) instead.尝试使用getBoundingClientRect ( MDN ) 代替。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.