Выпадающий список меню выпадает не с первого клика, а со второго

Question

Помогите, пожалуйста. Сделала nav-меню и при нажатии на один из пунктов должен выпадать список. Он выпадает, но почему-то не с первого клика, а со второго.

function show_list() {
   let services = document.getElementById("services_id");

    window.onclick = function (event) {
        if (!event.target.matches('.dropdown_list')) {
            document.getElementById('services_id')
                .style.display = "none";
        }
    };

    if (services.style.display == "none") {
        services.style.display = "block";
    } else {
        services.style.display = "none";
    }
}

li {
    list-style: none;
}
.container-menu {
    display: flex;
    justify-content: space-between;
    margin-right: 150px;
    }
    .list-menu {
    color: #0C1F53;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 39px;
    letter-spacing: 0em;
    text-align: center;
    padding: 15px;
    text-decoration: none;
}
.list-menu:hover {
    cursor: pointer;
    color: #ed1c24;
}
.services {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    left: 10%;
    top: 20%;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 10;
}
.services li {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    list-style: none;
    color: #0C1F53;
    font-family: 'Roboto', sans-serif;
    border: 1px solid white;
    font-size: 20px;
}
.services li a {
    text-decoration: none;
    color: #0C1F53;
    display: block;
    padding: 10px;
}
.services li:hover {
    background-color: #BAD7E9;
}

        <nav class="container__nav-menu">
            <ul class="container-menu">
                <a href="#about" class="list-menu"><li>Company</li></a>
                <li class="dropdown_list list-menu" onclick="show_list()">Services</li>
                <a href="#news" class="list-menu"><li>News and events</li></a>
                <a href="#vendors" class="list-menu"><li>Vendors</li></a>
                <a href="#contacts" class="list-menu"><li>Contacts</li></a>
            </ul>
            <div id="services_id" class="services"> 
                <li><a href="#">Software supply</a></li> 
                <li><a href="#">Consulting</a></li>
                <li><a href="#">Integration</a></li> 
                <li><a href="#">Training</a></li> 
                <li><a href="#">Technical support</a></li> 
            </div> 
        </nav>

Answer 1

С разметки удалите обработчик события. Попробуйте вот так.

const services = document.querySelector('#services_id');
const list = document.querySelector('.dropdown_list');

function showList() {
  services.style.display = 'block';
}

function hideList() {
  services.style.display = 'none';
}

window.addEventListener('click', (e) => {
  const target = e.target;

  if ((target && target !== list) || services.style.display == 'block') {
    hideList();
  } else {
    showList();
  }

});

Answer 2

При первом клике у вас функция вешает display:none на класс, попробуйте прописать стиль в самом элементе а не в файле стилей.

Замените

<div id="services_id" class="services">

На

<div id="services_id" class="services" style = "display: none;">

БЛОГ НА HUSL

Выпадающий список меню выпадает не с первого клика, а со второго

Ответы (2 шт):