Нажатие из выпадающего меню не закроет его

  • Вы правы, худшей сложностью является O (n). Возможно, вам придется посетить все элементы вашего массива.
  • Есть только одна причина не посещать элементы массива [mid, end], и это когда array[mid] > end (потому что в этом случае магия индекс, конечно, отсутствует в [mid, end] элементах.
  • Точно так же существует только одна причина не посещать элементы массива [start, mid], а это когда array[start] > mid.
  • Итак, есть надежда, что вы можете не посещать все элементы. Поэтому это одна оптимизация, которая может работать.

Таким образом, этот двоично-подобный метод кажется лучше, чем итерация по всему массиву линейно, но в худшем случае вы будете (0).


PS: Я предположил, что массив отсортирован в порядке возрастания.

1
задан Carol Connor 15 January 2019 в 20:29
поделиться

2 ответа

Вы можете добавить обработчик событий щелчка в документе. если целевой элемент не имеет предка элемента .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>

0
ответ дан gaetanoM 15 January 2019 в 20:29
поделиться

Есть несколько способов сделать это. один способ - прослушать onBlur ссылки, подобной этой

<a href="#" onBlur="onBlur('menuLoans')" onclick="menuClick('menuLoans')">
function onBlur(x) {
//hide your popup here
}
  • , другой способ - добавить оверлей с прозрачным фоном и прослушать щелчок по нему, чтобы закрыть всплывающее окно
  • [112 ] третий способ - прослушать щелчок из документа и, если targetElement не является одним из ваших a, закрыть его
0
ответ дан duc mai 15 January 2019 в 20:29
поделиться
Другие вопросы по тегам:

Похожие вопросы: