如何实现点击按钮时，对应Dropdown在按钮下方显示并匹配内容

问题分析 #

你当前代码存在两个核心问题：

• 所有下拉菜单使用了相同的id="myDropdown"，导致点击任意按钮只会触发第一个下拉菜单的显示/隐藏，无法对应各自的专属内容。
• 下拉菜单的CSS定位缺少top和left属性，导致默认显示在屏幕左侧而非按钮正下方。

修复方案 #

1. HTML调整：移除重复的id，调用myFunction时传入当前按钮元素（this）。
2. JS调整：通过传入的按钮元素，找到其相邻的下拉菜单元素，实现针对性的显示/隐藏切换。
3. CSS调整：给.dropdown-content添加top: 100%和left: 0，确保菜单显示在按钮正下方。

修改后的完整代码 #

HTML

<nav>                   
    <div class="dropdown">
        <button class="dropbtn" id="active" onclick="myFunction(this)">new
        </button>
        <div class="dropdown-content">
            <a href="#">link 1</a>
            <a href="#">link 2</a>
            <a href="#">link 3</a>
        </div>
    </div> 

    <div class="dropdown">
        <button class="dropbtn" onclick="myFunction(this)">fresh
        </button>
        <div class="dropdown-content">
            <a href="#">link 4</a>
            <a href="#">link 5</a>
            <a href="#">link 6</a>
        </div>
    </div> 

    <div class="dropdown">
        <button class="dropbtn" onclick="myFunction(this)">naija
        </button>
        <div class="dropdown-content">
            <a href="#">link 7</a>
            <a href="#">link 8</a>
            <a href="#">link 9</a>
        </div>
    </div> 
</nav>

CSS

nav {
    display: flex;
    background-color: #333; /* 给nav加背景色，方便查看按钮 */
}

.dropbtn {
    font-size: 12px;    
    border: none;
    outline: none;
    text-align: center;
    color: #f2f2f2;
    width: 155px;
    padding: 14px 16px;
    background-color: inherit;
    font-family: serif;
    text-transform: capitalize;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* 紧贴按钮底部 */
    left: 0; /* 对齐按钮左侧 */
    background-color: #f1f1f1;
    min-width: 200px;
    height: 200px;
    overflow: hidden;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 10px;
    padding-bottom: 20px;
    padding-top: 40px;
    opacity: .9;
}

.dropdown-content a {
    color: blue;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    width: 100%;
    font-size: 12px;
    border-bottom: 1px solid gray;
}

.dropdown-content a:hover {
    background-color: gray;
}

.show {
    display: block;
}

JavaScript

function myFunction(btn) {
    // 找到当前按钮的兄弟元素dropdown-content
    const dropdown = btn.nextElementSibling;
    dropdown.classList.toggle("show");
}

window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
        let dropdowns = document.getElementsByClassName("dropdown-content");
        for (let i = 0; i < dropdowns.length; i++) {
            let openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
};

额外说明 #

• 给nav添加了背景色，让按钮更清晰（可根据需求移除）。
• 修复了原CSS中.dropdown a:hover的选择器错误，改为.dropdown-content a:hover，确保鼠标悬停链接时样式生效。

内容的提问来源于stack exchange，提问作者Adex