带有单击事件的菜单按钮在第三次单击时停止

Question

当我尝试让这个左边的菜单栏工作时，我有一个问题，菜单按钮上的单击事件工作得很好，当我第一次点击左栏时，第二次点击关闭它再次正常工作，但在第三次点击再次打开它时，栏没有出现，我认为这是因为这不是一个循环，它只是停留在最后一个侦听器中。我想换个环境，但我不知道怎么做，我对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

创建一个指示侧边栏是否打开的布尔变量，而不是在单击事件内分配一个单击事件。然后单击应用相应的代码并更改变量值：

​

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
});

小提琴example here