JavaScript addEventListener
Question
He Stackoverflow,
Question is simple, If the window size is smaller than width 960px i can click a menu button. When i click it the nav height will be 325px instead of 60px and thats what i wanted to happen. 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 answers
solution1
2 ACCPTED 2017-02-11 18:57:22
You need to use get.nav.getBoundingClientRect().height to get the initial height value.
So in this case you can compare "real" value with your points (325 or 60).
As @squint mentioned in comments, you can't rely on style's height property. Try to go with getBoundingClientRect ( MDN ) instead.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.