Javascript 显示/隐藏div的JS源代码，没有'；I don’我没料到会这样

我正在编写显示/隐藏div的源代码。但是，如果我尝试显示一个新的div，它将隐藏在当前显示的div后面

以下是我构建的：

如果您尝试显示“选项”，然后显示“通知”（反之亦然），您将看到它有时不太好用。您需要单击两次才能使其工作。为什么它不那么好用

我想可能是更新了

this.isMenuOptionsOpen=false；this.isMenuNotificOpen=false导致了它。我怎样才能解决这个问题


这是完整的来源：


this.isMenuOptionsOpen=false；
this.isMenuNotificOpen=false；
函数菜单选项（）{
if（this.isMenuOptionsOpen==false）{
document.getElementById（'menuOptions'）。style.display='block'；
this.isMenuOptionsOpen=true；
document.getElementById（'menuNotific'）。style.display='none'；//如果打开，请关闭另一个菜单
}
否则{
document.getElementById（'menuOptions'）.style.display='none'；
this.isMenuOptionsOpen=false；
}
}
函数menuNotific（）{
if（this.isMenuNotificOpen==false）{
document.getElementById（'menuNotific'）.style.display='block'；
this.isMenuNotificOpen=true；
document.getElementById（'menuOptions'）。style.display='none'；//如果打开，请关闭另一个菜单
}
否则{
document.getElementById（'menuNotific'）.style.display='none'；
this.isMenuNotificOpen=false；
}
}


菜单选项
菜单通知
当您打开选项时，Notific，
IsMenuOptions打开
仍然设置为TRUE，因此当您请求打开它时，您的函数会尝试关闭它并将其设置为FALSE，然后再次单击打开它

打开Notific时，需要将IsMenuOptions open设置为FALSE。
可以使用jquery吗？会更容易（只是一个建议）
<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 -->