我正在尝试添加一个包含HTML、CSS和Javascript的下拉菜单

我正在尝试添加一个下拉菜单到我的小项目的下拉类。我已经能够为第二个酒吧做到这一点，它是有效的，但它不适用于第一个酒吧。我刚开始学习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>

这是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';
  }

})

删除

显示：无来自`。下拉内容a{…}

位置

显示：无用于
下拉列表内容
和
下拉列表内容2

document.querySelector（'.dropdown'）.addEventListener（'click'，function（）{
var content=document.querySelector（'.dropdown content'）；
如果（content.style.display=='none'）{
content.style.display='block'；
}否则{
content.style.display='none'；
}
});
document.querySelector（'.dropdown2'）.addEventListener（'click'，function（））{
var content2=document.querySelector（'.dropdown-content2'）；
如果（content2.style.display=='none'）{
content2.style.display='block'；
}否则{
content2.style.display='none'；
}
});
。下拉列表{
位置：相对位置；
显示：内联块；
}
.下载{
文字装饰：无；
光标：指针；
颜色：黑色；
}
.下拉内容{
位置：绝对位置；
z指数：1；
}
.下拉内容a{
填充：10px 36px；
边缘顶部：2倍；
文本对齐：居中；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下载{
文字装饰：无；
光标：指针；
颜色：黑色；
}
.下拉内容{
位置：绝对位置；
z指数：1；
显示：无；
}
.下拉内容a{
填充：20px0；
边缘顶部：10px；
文本对齐：居中；
}
.下拉列表2{
位置：相对位置；
显示：内联块；
左侧填充：40px；
}
.下载2 a{
文字装饰：无；
光标：指针；
颜色：黑色；
}
.下拉列表2{
位置：绝对位置；
z指数：1；
显示：无；
}
.下拉列表内容2 a{
填充：20px0；
边缘顶部：10px；
文本对齐：居中；
}
您应该创建两个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>

仅使用.hidden或.visible类来显示容器。
这为您的web带来了一点可伸缩性，因此您可以将这种下拉行为标准化

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');
});

希望能有帮助。
任何问题，请告诉我。
这是因为
content2.style.display
不返回计算的CSS样式，而只返回元素本身的
style
属性设置的属性。您可能希望使用CSS类来切换显示，然后可以检查元素是否具有该类。谢谢。虽然我试过了，但没用。我将样式直接添加到html元素中，我只得到了“dropdown2”的下拉列表，谢谢。虽然我试过了，但没用。我将样式直接添加到html元素中，我只得到了“dropdown2”的下拉列表，这意味着我添加的代码片段是否按照您的要求工作？我是否添加了html的第二个ID可见的类。类为hidden的容器。您可以使用另一个键复制#dd1容器（#dd2，可能是为了匹配sample.js）
.dropdown {
    position: relative;
    display: inline-block;

    border: 1px solid red;
}

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

.hidden {
    display: none;
}

.visible {
    display: block;
}

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');
});