我必须点击两次才能看到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(); 
    } 
}