如何使用javascript在头像上创建下拉菜单？

Question

我试图在头像中实现一个下拉菜单，但几次失败，你能帮忙吗？ （使用CSS或javascript会很好，我想学习两者）

        <button class="dropbtn">My avatar</button>
        <div class="dropdown-content">
            <a href="#">My dashboard</a>
            <a href="#">Sign up</a>
            <a href="#">Go check out!</a>
        </div>
    </div>

  <img style = "float: right; size: 35px; margin-left: 550px;"class="avatar-large" alt="avatar-large" src="https://cdn3.iconfinder.com/data/icons/fillies-small/64/id-card-512.png" />

Answer 1

首先，将内容的可见性设置为hidden在CSS中，然后在JavaScript上：

document.getElementsByClassName("dropbtn"). addEventListener ("click", function() {
    document.getElementByClassName("dropdown-content").style.visibility = "visible";
});

或者，首先更改按钮的显示以display: none; 并在style.display上的JavaScript部分更改它，并将其更改为block → style.display = "block";