Я пытаюсь добавить выпадающее меню с HTML, CSS и Javascript

Question

Я пытаюсь добавить выпадающее меню в выпадающий класс моего мини-проекта. Я был в состоянии сделать это для второго бара, и он работает, но он не работает для первого. Я только начал изучать html, css и javascript и пытаюсь скопировать домашнюю страницу отеля.

Это HTML. Я включил только часть выпадающего меню.

<div class = "dropdown">
      <a href="#">Currency</a>
    <div class ="dropdown-content">
      <a href="">Naira</a>
      <a href="">Dollar</a>
      <a href="">Euro</a>
      <a href="">Pound</a>
    </div>
    </div>
    <div class = "dropdown2">
      <a href="#">Language</a>
    <div class ="dropdown-content2">
      <a href="">English</a>
      <a href="">French</a>
    </div>
    </div>

Это CSS. Также включены стили для выпадающего меню.

.dropdown{
  position: relative;
  display: inline-block;
}
.dropdown a {
  text-decoration: none;
  cursor: pointer;
  color: black;
}
.dropdown-content{
  position: absolute;
  z-index: 1;
}
.dropdown-content a{
  display: none;
  padding: 10px 36px;
  margin-top: 2px;
  text-align: center;

}
.dropdown{
  position: relative;
  display: inline-block;
}
.dropdown a {
  text-decoration: none;
  cursor: pointer;
  color: black;
}
.dropdown-content{
  position: absolute;
  z-index: 1;
  display: none;
}
.dropdown-content a{

  padding: 20px 0;
  margin-top: 10px;
  text-align: center;

}
.dropdown2{
  position: relative;
  display: inline-block;
  padding-left: 40px;
}
.dropdown2 a{
  text-decoration: none;
  cursor: pointer;
  color: black;
}
.dropdown-content2{
  position: absolute;
  z-index: 1;
  display: none;
}
.dropdown-content2 a{

  padding: 20px 0;
  margin-top: 10px;
  text-align: center;

}

Это Javascript. Второй выпадающий список 2 работает, но первый - нет.

document.querySelector('.dropdown').addEventListener('click', function(){
  var content = document.querySelector('.dropdown-content');
  if (content.style.display==='none') {
    content.style.display = 'block';

  } else {
    content.style.display = 'none';
  }

})



document.querySelector('.dropdown2').addEventListener('click', function(){
  var content2 = document.querySelector('.dropdown-content2');
  if (content2.style.display==='none') {
    content2.style.display = 'block';

  } else {
    content2.style.display = 'none';
  }

})

Answer 1

1. Удалить display: none; из `.dropdown-content a {...}.
2. Поместить display:none; во встроенный запрос для dropdown-content и dropdown-content2.

document.querySelector('.dropdown').addEventListener('click', function() {
  var content = document.querySelector('.dropdown-content');
  if (content.style.display === 'none') {
    content.style.display = 'block';

  } else {
    content.style.display = 'none';
  }

});



document.querySelector('.dropdown2').addEventListener('click', function() {
  var content2 = document.querySelector('.dropdown-content2');
  if (content2.style.display === 'none') {
    content2.style.display = 'block';

  } else {
    content2.style.display = 'none';
  }

});

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown a {
  text-decoration: none;
  cursor: pointer;
  color: black;
}

.dropdown-content {
  position: absolute;
  z-index: 1;
}

.dropdown-content a {
  padding: 10px 36px;
  margin-top: 2px;
  text-align: center;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown a {
  text-decoration: none;
  cursor: pointer;
  color: black;
}

.dropdown-content {
  position: absolute;
  z-index: 1;
  display: none;
}

.dropdown-content a {
  padding: 20px 0;
  margin-top: 10px;
  text-align: center;
}

.dropdown2 {
  position: relative;
  display: inline-block;
  padding-left: 40px;
}

.dropdown2 a {
  text-decoration: none;
  cursor: pointer;
  color: black;
}

.dropdown-content2 {
  position: absolute;
  z-index: 1;
  display: none;
}

.dropdown-content2 a {
  padding: 20px 0;
  margin-top: 10px;
  text-align: center;
}

<div class = "dropdown">
      <a href="#">Currency</a>
    <div class ="dropdown-content" style="display:none;">
      <a href="">Naira</a>
      <a href="">Dollar</a>
      <a href="">Euro</a>
      <a href="">Pound</a>
    </div>
    </div>
    
    <div class = "dropdown2">
      <a href="#">Language</a>
    <div class ="dropdown-content2" style="display:none;">
      <a href="">English</a>
      <a href="">French</a>
    </div>
    </div>

Answer 2

Вы должны создать два CSS класса для обработки поведения в вашем скрипте. Вот пример:

sample.html

<div class="dropdown" id="dd1">
    Currency
    <div class="dropdown-content hidden" id="dc1">
        <a href="">Item 1</a>
        <a href="">Item 2</a>
        <a href="">Item 3</a>
        <a href="">Item 4</a>
        <a href="">Item 5</a>
    </div>
</div>

Обратите внимание, что у контейнеров по умолчанию скрыт класс.

sample.css

.dropdown {
    position: relative;
    display: inline-block;

    border: 1px solid red;
}

.dropdown-content {
    position: absolute;
    z-index: 1;
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

Используйте только классы .hidden или .visible для отображения контейнера. Это обеспечивает некоторую масштабируемость в сети, поэтому вы можете стандартизировать это поведение выпадающего меню.

sample.js

changeClass = (id) => {
    const element = document.querySelector(`#${id}`);
    if (element.classList.contains('hidden')) 
        swapClasses(element.classList, 'hidden', 'visible');
    else 
        swapClasses(element.classList, 'visible', 'hidden');
};

swapClasses = (list, toRemove, toAdd) => {
    list.remove(toRemove);
    list.add(toAdd);
}

document.querySelector('#dd1').addEventListener('click', () => {
    changeClass('dc1');
});

document.querySelector('#dd2').addEventListener('click', () => {
    changeClass('dc2');
});

Надеюсь, это поможет. Любой вопрос или вопрос, пожалуйста, дайте мне знать.