帶有單擊事件的菜單按鈕在第三次單擊時停止

Question

在嘗試使此左側菜單欄工作時，我提出了一個問題，菜單按鈕上的click事件工作正常，當我第一次單擊左欄時，再次單擊以關閉它，但在第三次單擊以再次打開它，該條沒有出現，我認為發生這種情況是因為不是循環​​，而是停留在最后一個監聽器中。 我試圖制作一個開關盒，但我不知道如何，我是javascript新手。

 document.getElementById('menu-ic').addEventListener('click', function(evt) { document.getElementById('menu-hidden').style.left = '0'; document.getElementById('l1').style.cssText = 'background-color: #000000;width:0px;'; document.getElementById('l2').style.cssText = 'background-color: #000000;width:26px;'; document.getElementById('l3').style.cssText = 'background-color: #000000;width:0px;'; if (document.getElementById('menu-hidden').style.left = '0') { document.getElementById('menu-ic').addEventListener('click', function(evt) { document.getElementById('menu-hidden').style.left = '-300px'; document.getElementById('l1').style.cssText = 'width:20px;'; document.getElementById('l2').style.cssText = 'width:24px;'; document.getElementById('l3').style.cssText = 'width:22px;'; }); } }); 

 #menu-hidden { position: absolute; width: 300px; height: 1200px; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ opacity: 0.98; top: -120px; left: -300px; z-index: 550; transition: all 1s ease; } #menu-hidden ul { position: absolute; top: 15%; } #menu-hidden ul li { padding-top: 15px; padding-bottom: 15px; padding-left: 120px; float: right; list-style: none; text-align: right; } #menu-hidden ul li a { font-family: sans-serif; color: #2c2c2c; font-size: 18px; text-transform: uppercase; } #menu-hidden ul li a:hover { color: #d6222f; transition: all 0.5s ease; } button:focus { outline: none; } nav { position: relative; display: inline-block; float: left; } #menu-ic { background: none; border: none; position: absolute; cursor: pointer; width: 30px; height: 30px; top: 30px; left: 30px; z-index: 600; } #menu-ic hr { height: 2px; background-color: #000; position: absolute; border: none; transition: all 1s ease; z-index: 500; } #l1 { width: 20px; top: 0; } #l2 { width: 24px; top: 8px; } #l3 { width: 22px; top: 16px; } 

 <div id="menu-hidden" > <ul> <li><a href="#" class="anchor-scroll active">Retail Registration</a></li> <li><a href="#" class="anchor-scroll">Wholesale Registration</a></li> <li><a href="#" class="anchor-scroll">Mens Clothing</a></li> <li><a href="#" class="anchor-scroll">Women</a></li> <li><a href="#" class="anchor-scroll">Private Label</a></li> <li><a href="#" class="anchor-scroll">Lookbook</a></li> <li><a href="#" class="anchor-scroll">Catalogue</a></li> <li><a href="#" class="anchor-scroll">Contact Us</a></li> </ul> </div> <nav> <button id="menu-ic"> <hr id="l1"> <hr id="l2"> <hr id="l3"> </button> </nav> 

Answer 1

代替在click事件中分配click事件，而是創建一個指示是否打開側邊欄的布爾變量。 然后單擊以應用相應的代碼並更改變量值：

 var opened = false; document.getElementById('menu-ic').addEventListener('click', function(evt) { if (opened == true) { document.getElementById('menu-hidden').style.left = '-300px'; document.getElementById('l1').style.cssText = 'width:20px;'; document.getElementById('l2').style.cssText = 'width:24px;'; document.getElementById('l3').style.cssText = 'width:22px;'; opened = false; } else { document.getElementById('menu-hidden').style.left = '0'; document.getElementById('l1').style.cssText = 'background-color: #000000;width:0px;'; document.getElementById('l2').style.cssText = 'background-color: #000000;width:26px;'; document.getElementById('l3').style.cssText = 'background-color: #000000;width:0px;'; opened = true; } }); 

 #menu-hidden { position: absolute; width: 300px; height: 1200px; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dbdbdb', GradientType=1); /* IE6-9 fallback on horizontal gradient */ opacity: 0.98; top: -120px; left: -300px; z-index: 550; transition: all 1s ease; } #menu-hidden ul { position: absolute; top: 15%; } #menu-hidden ul li { padding-top: 15px; padding-bottom: 15px; padding-left: 120px; float: right; list-style: none; text-align: right; } #menu-hidden ul li a { font-family: sans-serif; color: #2c2c2c; font-size: 18px; text-transform: uppercase; } #menu-hidden ul li a:hover { color: #d6222f; transition: all 0.5s ease; } button:focus { outline: none; } nav { position: relative; display: inline-block; float: left; } #menu-ic { background: none; border: none; position: absolute; cursor: pointer; width: 30px; height: 30px; top: 30px; left: 30px; z-index: 600; } #menu-ic hr { height: 2px; background-color: #000; position: absolute; border: none; transition: all 1s ease; z-index: 500; } #l1 { width: 20px; top: 0; } #l2 { width: 24px; top: 8px; } #l3 { width: 22px; top: 16px; } 

 <div id="menu-hidden"> <ul> <li><a href="#" class="anchor-scroll active">Retail Registration</a> </li> <li><a href="#" class="anchor-scroll">Wholesale Registration</a> </li> <li><a href="#" class="anchor-scroll">Mens Clothing</a> </li> <li><a href="#" class="anchor-scroll">Women</a> </li> <li><a href="#" class="anchor-scroll">Private Label</a> </li> <li><a href="#" class="anchor-scroll">Lookbook</a> </li> <li><a href="#" class="anchor-scroll">Catalogue</a> </li> <li><a href="#" class="anchor-scroll">Contact Us</a> </li> </ul> </div> <nav> <button id="menu-ic"> <hr id="l1"> <hr id="l2"> <hr id="l3"> </button> </nav> 

Answer 2

我認為您的錯誤是：您將點擊事件分配給不同狀態的點擊事件。 而不是這樣做，讓我們定義變量isHidden

var isHidden = true;
document.getElementById('menu-ic').addEventListener('click', function(evt) {
  if(isHidden){
      document.getElementById('menu-hidden').style.left = '0';
      document.getElementById('l1').style.cssText = 'background-color: #000000;width:0px;';
      document.getElementById('l2').style.cssText = 'background-color: #000000;width:26px;';
      document.getElementById('l3').style.cssText = 'background-color: #000000;width:0px;';
    }else{
                document.getElementById('menu-hidden').style.left = '-300px';
                document.getElementById('l1').style.cssText = 'width:20px;';
                document.getElementById('l2').style.cssText = 'width:24px;';
                document.getElementById('l3').style.cssText = 'width:22px;';

    }
    isHidden = !isHidden
});

小提琴的例子在這里