0
Он Stackoverflow,JavaScript addEventListener
Вопрос прост, Если размер окна меньше, чем ширина 960px я могу нажать на кнопку меню. Когда я нажму на него, высота навигация будет 325px вместо 60px, и это то, что я хотел. Он работает, но вы можете увидеть результат, если вы нажмете кнопку во второй раз. Может кто-нибудь объяснить, почему это происходит?
// 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>
Ваш навигатор имеет 60 пикселей при щелчке. После второго клика высота равна 325px. – Blauharley
Потому что '.height' начинается с' '' ', независимо от CSS. –
Поскольку вы возвращаетесь к исходной высоте, сделайте следующее: 'if (get.nav.style.height === '') { get.nav.style.height = '325px'; } else { get.nav.style.height = ''; } ' Или, лучше, используйте класс вместо настройки свойств CSS непосредственно на элементе. –