在Javascript中創建下拉菜單-畫布上未顯示任何內容

Question

我試圖在javascript，html和css中創建一個下拉菜單，但是當我運行代碼時，畫布上沒有任何顯示。 是因為文件之間無法正確通信？

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

Answer 1

您的畫布在菜單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>

，因此這是一個有效的小提琴：

https://jsfiddle.net/ahpook4p/

在Javascript中創建下拉菜單-畫布上未顯示任何內容

問題描述

1 個解決方案

解決方案1
0 2017-07-20 13:07:28

在Javascript中創建下拉菜單-畫布上未顯示任何內容

問題描述

1 個解決方案

解決方案1 0 2017-07-20 13:07:28

解決方案1
0 2017-07-20 13:07:28