JS显示/隐藏div的来源，没有按预期工作

Question

我写的显示/隐藏divs的sorce。

如果当你尝试显示新的div时，显示一些div，它会隐藏他。

这里是我建：http://talkbox.co.il/text.htm

，如果你会尝试它，你会看到，如果你试图表现出“选项”和“notific”（反之亦然）的一些次后，其没有工作以及。你需要点击2次才能工作。

为什么它不起作用？

我想也许它是因为更新this.isMenuOptionsOpen = false; this.isMenuNotificOpen = false;。我怎样才能解决这个问题？

---

这是完整的源代码：

<script> 
    this.isMenuOptionsOpen = false; 
    this.isMenuNotificOpen = false; 
    function menuOptions() { 
     if (this.isMenuOptionsOpen == false) { 
      document.getElementById('menuOptions').style.display = 'block'; 
      this.isMenuOptionsOpen = true; 
      document.getElementById('menuNotific').style.display = 'none'; // close another menu if open 
     } 
     else { 
      document.getElementById('menuOptions').style.display = 'none'; 
      this.isMenuOptionsOpen = false; 
     } 
    } 
    function menuNotific() { 
     if (this.isMenuNotificOpen == false) { 
      document.getElementById('menuNotific').style.display = 'block'; 
      this.isMenuNotificOpen = true; 
      document.getElementById('menuOptions').style.display = 'none'; // close another menu if open 
     } 
     else { 
      document.getElementById('menuNotific').style.display = 'none'; 
      this.isMenuNotificOpen = false; 
     } 
    } 
</script> 


<!-- buttons to show/hode the divs--> 
<a href="javascript: menuOptions();"> options </a><br> 
<a href="javascript: menuNotific();"> notific </a> 
<!-- end buttons to show/hode the divs --> 


<!-- divs to show/hide --> 
<div id='menuOptions' style='width:100px; height:100px; background-color:green; display:none; position:relative; color:black;'>menu options</div> 
<div id='menuNotific' style='width:100px; height:100px; background-color:yellow; display:none; position:relative; color:black;'>menu notific</div> 
<!-- end divs to show/hide --> 

Answer 1

当你打开选项，然后Notific，isMenuOptionsOpen仍设置为TRUE，所以当你问到打开它，你的函数尝试关闭它并将isMenuOptionsOpen设置为FALSE，最后再点击一次即可打开它。

当您打开Notific时，您需要将isMenuOptionsOpen设置为FALSE。