javascript - 我必须单击两次才能使 div 可见。怎么解决？

Question

var divs = ["userMenu", "submenu"];
var visibleDivId = null;

function toggleVisibility(divId) {
    if (visibleDivId == divId) {
        visibleDivId = null;
    } else {
        visibleDivId = divId;
    }
    hideNonVisibleDivs();
}

function hideNonVisibleDivs() {
    var i, divId, div;
    for (i = 0; i < divs.length; i++)
    {
        divId = divs[i];
        div = "#" + document.getElementById(divId).id;
        if (visibleDivId == divId) 
            $(div).fadeIn();
        else 
            $(div).fadeOut();
    }
}

第一次它工作得很好。但是，当我在单击将关闭 div 的 a 元素后尝试打开同一个 div 时，我必须单击它两次。我明白了为什么，第一次点击 div 时，visisbleDivId 与 divId 相同，因此 visibleDivId 将被设置为 null。第二次点击，它将淡出，因为它不再与 divId 相同。

我知道出了什么问题，但我不知道如何解决。

Answer 1

您不需要那个额外的功能。因为你在“visibleDivId”中存储了哪个 div 是可见的，所以你只需要隐藏那个 div 而不需要循环遍历其他 div。

var divs = ["userMenu", "submenu"];
var visibleDivId = null;

function toggleVisibility(divId) {
    if (visibleDivId == divId) {
        $(visibleDivId).fadeOut();
        visibleDivId = null;
    } else {
        if (visibleDivId) {
            $(visibleDivId).fadeOut();
        }
        visibleDivId = divId;
        $(visibleDivId).fadeIn();
    }
}