JavaScript 添加事件監聽器

Question

他 Stackoverflow，

問題很簡單，如果窗口大小小於寬度 960 像素，我可以單擊菜單按鈕。 當我點擊它時，導航高度將是 325 像素而不是 60 像素，這就是我想要發生的。 它有效，但只有第二次單擊該按鈕才能看到結果。 有人可以解釋為什么會發生這種情況嗎？

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

Answer 1

您需要使用get.nav.getBoundingClientRect().height來獲取初始高度值。

因此，在這種情況下，您可以將“真實”價值與您的積分（325 或 60）進行比較。

正如@squint在評論中提到的，你不能依賴 style 的 height 屬性。 嘗試使用getBoundingClientRect ( MDN ) 代替。

JavaScript 添加事件監聽器

問題描述

1 個解決方案

解決方案1
2 已采納 2017-02-11 18:57:22

JavaScript 添加事件監聽器

問題描述

1 個解決方案

解決方案1 2 已采納 2017-02-11 18:57:22

解決方案1
2 已采納 2017-02-11 18:57:22