Слайдер не закрывается

Question

У меня есть:

// Menu
function openNav() {
  document.querySelector("div.slider").style.width = "250px";
    document.querySelector("div.slider").style.boxShadow = "-2px 0px 5px -1px rgba(0,0,0,0.75)";
}
function closeNav() {
  document.querySelector("div.slider").style.width = "0";
    document.querySelector("div.slider").style.boxShadow = "";
}

<nav>
            <a href="index.html"><div class="logo"></div></a>
            <div class="menu" onclick="openNav()">
                <div class="slider">
                    <a href='#Home' onclick="closeNav()">Home</a>
                    <a href="#Services" onclick="closeNav()">Services</a>
                    <a href="#Portfolio" onclick="closeNav()">Portfolio</a>
                    <a href="#Team" onclick="closeNav()">Team</a>
                    <a href="#Contact" onclick="closeNav()">Contact</a>
                </div>
            </div>
        </nav>

Ползунок не закрывается. Я также попытался настроить его так, чтобы, если я щелкну за пределами div, он закроется, но не работает. Если я запускаю closeNav () в консоли, навигация закрывается нормально, но я не могу заставить работать onclick.

Answer 1

Что не так в вашем коде, так это то, что вы вызываете оба метода одновременно. Когда вы щелкаете по пункту меню, в этом порядке вызываются и closeNav, и openNav, поэтому вы всегда будете видеть его открытым. Вы можете заметить это, добавив console.log("open") и console.log("close") в свои методы. Это происходит потому, что, если вы щелкаете по пункту меню, вы также щелкаете меню позади:)

Вам следует рассмотреть возможность использования класса CSS и classList.toggle("open-nav"). См. Пример ниже:

function toggleNav() {
  document.querySelector("div.slider").classList.toggle("open-nav");
}

.open-nav {
  width: 250px;
  box-shadow: -2px 0px 5px -1px rgba(0,0,0,0.75);
}

<nav>
            <a href="index.html"><div class="logo"></div></a>
            <div class="menu" onclick="toggleNav()">
                <div class="slider">
                    <a href='#Home'>Home</a>
                    <a href="#Services">Services</a>
                    <a href="#Portfolio">Portfolio</a>
                    <a href="#Team">Team</a>
                    <a href="#Contact">Contact</a>
                </div>
            </div>
        </nav>

Answer 2

События распространяются или «всплывают» , поэтому, когда вы щелкаете ссылку, вы вызываете функцию closeNav, но затем это событие click всплывает до родительского меню, где вызывается openNav.

Здесь нужно переделать несколько вещей:

• Не выполняйте обработку событий с атрибутами HTML. Отдельное событие обработка в JavaScript.
• Не устанавливайте встроенные стили, если вы можете с этим справиться, позже их будет сложно переопределить. Отделите свой CSS от HTML.
• Здесь вам нужна только одна функция. Начните с элементов меню, скрытых в качестве их стиля по умолчанию, а затем просто переключайте их по мере необходимости с помощью функции переключения.
• Вы можете использовать всплытие событий, выполнив делегирование событий . Просто установите свой обработчик событий на родительский элемент для всех возможных элементов, по которым был выполнен щелчок, и позвольте событию всплыть на этот родительский элемент. Затем проверьте event.target, чтобы увидеть, был ли источник тем, над чем вам нужно действовать.

// Get your DOM references just once
let slider = document.querySelector("div.slider");

// Do all your event binding in JavaScript, not with HTML attributes
document.querySelector("div.menu").addEventListener("click", toggleNav);
slider.addEventListener("click", toggleNav);

function toggleNav(event) {
  // Check to see if the click came from a link or the menu
  if(event.target.classList.contains("link")){
    slider.classList.add("hidden");  // Link: reinstate the hidden class
  } else {
    slider.classList.remove("hidden"); // Menu: remove the hidden class
  }
}

.slider {
  width:250px;
  box-shadow: -2px 0px 5px -1px rgba(0,0,0,0.75)
}
.hidden { display:none; }

<nav>
  <a href="index.html"><div class="logo"></div></a>
  <div class="menu">MENU
     <div class="slider hidden">
        <a class="link" href='#Home'>Home</a>
        <a class="link" href="#Services">Services</a>
        <a class="link" href="#Portfolio">Portfolio</a>
        <a class="link" href="#Team">Team</a>
        <a class="link" href="#Contact">Contact</a>
     </div>
  </div>
</nav>