array[mid] > end
(потому что в этом случае магия индекс, конечно, отсутствует в [mid, end] элементах. array[start] > mid
. Таким образом, этот двоично-подобный метод кажется лучше, чем итерация по всему массиву линейно, но в худшем случае вы будете (0).
PS: Я предположил, что массив отсортирован в порядке возрастания.
Вы можете добавить обработчик событий щелчка в документе. если целевой элемент не имеет предка элемента .menuBar (см .: .closest () ), вы можете закрыть меню:
document.addEventListener('click', function(e) {
if (e.target.closest('.menuBar') == null) {
document.querySelectorAll('.menuBar ul').forEach((ele) => ele.style.display = "none");
}
});
function menuClick (x, e) {
e.preventDefault();
var dropMenu = document.getElementById(x);
var dropAccounts = document.getElementById('menuAccounts');
var dropLoans = document.getElementById('menuLoans');
if(x === 'menuAccounts'){
if(dropMenu.style.display !== "block"){
dropMenu.style.display = "block";
dropLoans.style.display = "none";
}else{
dropMenu.style.display = "none";
};
}else if(x === 'menuLoans'){
if(dropMenu.style.display !== "block"){
dropMenu.style.display = "block";
dropAccounts.style.display = "none";
}else{
dropMenu.style.display = "none";
};
}
};
nav {
color: #ffffff;
background-color: #0000ff;
}
.menuBar li{
display: inline-block;
text-align: center;
}
.menuBar li a{
color: #ffffff;
text-decoration: none;
}
#menuAccounts{
display: none;
position: absolute;
background-color: #0000ff;
margin: 0 0 0 3em;
}
#menuLoans{
display: none;
position: absolute;
background-color: #0000ff;
margin: 0 0 0 6em;
}
#menuAccounts li, #menuLoans li{
display: block;
text-align: left;
padding: 0 1.5em;
}
<nav>
<ul class="menuBar">
<li><a href="index.html">Home</a></li>
<li><a href="#" onclick="menuClick('menuAccounts', event)">Accounts</a></li>
<ul id="menuAccounts">
<li>Savings</li>
<li>Checking</li>
</ul>
<li ><a href="#" onclick="menuClick('menuLoans', event)">Loans</a></li>
<ul id="menuLoans">
<li>Auto</li>
<li>Mortgage</li>
</ul>
<li><a href="about.html">About</a></li>
</ul>
</nav>
Есть несколько способов сделать это. один способ - прослушать onBlur ссылки, подобной этой
<a href="#" onBlur="onBlur('menuLoans')" onclick="menuClick('menuLoans')">
function onBlur(x) {
//hide your popup here
}