Javascript事件監聽器菜單覆蓋

我想使用簡單的Javascript沒有涉及jQuery。Javascript事件監聽器菜單覆蓋

我在疊加打開和關閉菜單時遇到了一些困難。我可以打開，關閉，打開但不會執行evenListener。

任何人有一個小提示？

function toggleMenu() { 
    this.classList.toggle('active', true); 
    openOverlay(); 
} 

function openOverlay() { 
    document.getElementById('overlay').style.height = "100%"; 
    x.addEventListener('click', closeOverlay, false); 
} 
function closeOverlay() { 
    this.classList.toggle('active', false); 
    document.getElementById('overlay').style.height = "0"; 

    x.addEventListener('click', openOverlay, false); 
} 

var x = document.getElementById('menu-toggle'); 
x.addEventListener('click', toggleMenu, false);

來源

2016-12-21 Ya Yan

classList.toggle返回一個布爾值，這樣你就可以，如果添加或刪除簡單檢查active類。

toggle (String [, force])

當只有一個參數存在：撥動類值;即，如果它是類存在，那麼刪除它並返回false，如果沒有，那麼添加它並返回true ...

var overlay = document.getElementById('overlay') 
 
var x = document.getElementById('menu-toggle'); 
 

 
function toggleMenu(e) { 
 
    var isActive = this.classList.toggle('active'); 
 
    (isActive) ? overlay.style.height = "100%" : overlay.style.height = "0%" 
 
} 
 

 
x.addEventListener('click', toggleMenu, false);

* {box-sizing: border-box;} 
 

 
body { 
 
    margin: 0; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
#overlay { 
 
    height: 0%; 
 
    width: 100%; 
 
    background-color: rgba(0,0,0); 
 
    background-color: rgba(0,0,0, 0.9); 
 
    overflow-y: hidden; 
 
    position: fixed; 
 
    margin: 0px; 
 
    z-index: 1; 
 
    transition: 0.5s; 
 
} 
 

 
#overlay > a { 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    color: #818181; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-size: 1.8em; 
 
    padding: 15px 0; 
 
    display: block; 
 
} 
 

 
#overlay a:hover, #overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
#menu-toggle { 
 
    cursor: pointer; 
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: flex; 
 
    -webkit-flex-wrap: nowrap; 
 
    -moz-flex-wrap: nowrap; 
 
    flex-wrap: nowrap; 
 
    width: 90px; 
 
    margin: 20px 0 0 0; 
 
    right: 10%; 
 
    -webkit-justify-content: center; 
 
    -moz-justify-content: center; 
 
    position: absolute; 
 
    z-index: 999; 
 
} 
 

 
div, #menu { 
 
    margin: auto; 
 
} 
 

 
[id*="bar"] { 
 
    width: 30px; 
 
    border-bottom: medium solid black; 
 
    border-radius: 25px; 
 
    margin-bottom: 5px; 
 
} 
 

 
.active #bar1 { 
 
    -ms-transform: rotate(-45deg) translate(-3px, 10px); /* IE 9 */ 
 
    -webkit-transform: rotate(-45deg) translate(-3px, 10px); /* Safari */ 
 
    transform: rotate(-45deg) translate(-3px, 10px); 
 
    transition: 0.4s; 
 
} 
 

 
.active #bar2 { 
 
    opacity: 0; 
 
    transition: 0.4s; 
 
} 
 

 
.active #bar3 { 
 
    -ms-transform: rotate(45deg) translate(-1px, -8px); /* IE 9 */ 
 
    -webkit-transform: rotate(45deg) translate(-1px, -8px); /* Safari */ 
 
    transform: rotate(45deg) translate(-1px, -8px); 
 
    transition: 0.4s; 
 
}

<header> 
 
    <nav> 
 
    <div id="overlay"> 
 
     <a href="javascript:void(0)">&times;</a> 
 
     <a href="">Home</a> 
 
     <a href="">Travels</a> 
 
     <a href="">Tutorials</a> 
 
     <a href="">Books</a> 
 
     <a href="">About Me</a> 
 
    </ul> 
 
    </nav> 
 
    </header> 
 
    
 
    <div id="menu-toggle"> 
 
    <div id="container"> 
 
     <div id="bar1"></div> 
 
     <div id="bar2"></div> 
 
     <div id="bar3"></div> 
 
    </div><span id="menu">Menu</span> 
 
    </div>

來源

2016-12-21 15:23:15 DavidDomain

謝謝，我定我的'IF ... ELSE聲明' –

所以我想沒有辦法讓事件監聽器看起來像循環？ –

不確定你的意思。在這裏幫助我。 *看起來很像循環*？ – DavidDomain

Javascript事件監聽器菜單覆蓋

回答

相關問題