Question

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

以下是我建立的内容：http://talkbox.co.il/text.htm

如果您尝试显示＆＃39;选项＆＃39;然后是＃not;＆＃39; notific＆＃39; （反之亦然），你会发现它有时候效果不好。您需要单击两次才能使其正常工作。为什么它不能很好地运作？

我想也许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。

JS来源显示/隐藏div，没有像我预期的那样工作

1 个答案: