个人中心
gpt4 book ai didi

javascript - 在 Javascript 中创建下拉菜单 - Canvas 上没有显示

转载 作者：行者123 更新时间：2023-11-28 03:21:05 24 4
gpt4 key购买 nike

我试图在 javascript、html 和 css 中创建一个下拉菜单，但是当我运行代码时， Canvas 上没有显示任何内容。是因为文件之间没有正确通信吗？

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>DropdownMenu</title>
        <link rel='stylesheet' type='text/css' href='Stylesheetdropdown.css'/>
    </head>
    <body>
        <canvas id="canvas" width="5000" height="5000">
        </canvas>
        <script type='text/javascript' src='DropdownMenu.js'></script>
    </body>
    <body>
    <div class = "dropdown">
    <button onclick = "dropdown()" class = "drpdwnbtn">Menu</button>
        <div id = "myMenu" class = "drpdwncntnt">
            <p>100</p>
            <p>200</p>
            <p>300</p>
        </div>
    </div>
    </body>
</html>

Javascript:

function dropdown() {
    document.getElementById("myMenu").classList.toggle("show");
}
window.onclick = function (event) {
    if (!event.target.matches('.drpdwnbtn')) {

        var dropdowns = document.getElementsByClassName("drpdwncntnt"),
            i,
            openDropdown = dropdowns[i];
        for (i = 0; i < dropdowns.length; i += 1) {
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
};

CSS:

.drpdwnbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.drpdwnbtn:hover, .drpdwnbtn:focus {
    background-color: #E0FFFF;
}

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

.drpdwncntnt {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.drpdwncntnt a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

最佳答案

您的 Canvas 位于菜单 div 上方，您的 html 应如下所示:

<div class = "dropdown">
<button onclick = "dropdown()" class = "drpdwnbtn">Menu</button>
    <div id = "myMenu" class = "drpdwncntnt">
        <p>100</p>
        <p>200</p>
        <p>300</p>
    </div>
    </div>
    <canvas id="canvas" width="5000" height="5000">
    </canvas>

，所以这是一个有效的 fiddle :

https://jsfiddle.net/ahpook4p/

关于javascript - 在 Javascript 中创建下拉菜单 - Canvas 上没有显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45214232/

24 4 0
文章推荐： html - 表格对齐方式和不同的列宽
文章推荐： c++ - 输出的 GiNaC 顺序
文章推荐： javascript - 在可滚动区域内但在内部 div 之上创建嵌入阴影
文章推荐： css - 直接更改 ionic.css 是否安全？