javascript - 单击下拉菜单时不起作用

Question

您好，我尝试在我的网页中插入一个下拉菜单，但是当我尝试点击时，它没有显示下面的 div 并转到我的主页我尝试了一些不同的 html 和 css 代码也使用了 w3schools 的 javascript 引用但是没用。请帮我解决这个问题。

片段

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {

        var dropdowns = document.getElementsByClassName("del-menu-item");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

    #catering .container {
        text-align: left;
        box-sizing: border-box;
    }
    #catering .deliver {
        border-bottom: 1px solid #d6dbdf;
        margin: 0 20px;
    }
    #catering .delivery-menu {
        display: block;
        position: relative;
        width: 100%;
        padding: 36px 52px 28px 0;
        font-family: "DINCondensedBold", Verdana, Arial, sans-serif;
        text-transform: uppercase;
        font-weight: normal;
        font-size: 30px;
        letter-spacing: 0.05em;
        color: #253037;
        text-decoration: none !important;
    }
    #catering .del-menu-item {
        display: block;
        position: relative;
        width: 100%;
        padding: 28px;
        min-height: 135px;
        border-top: 1px solid #d6dbdf;
    }
    #catering .del-menu-item h3 {
        font-size: 30px;
        margin-bottom: 0;
        padding-right: 200px;
    }
    #catering .del-menu-item p {
        padding-right: 200px;
    }
    #catering .del-menu-item .pull-right {
        position: absolute;
        top: 20px;
        right: 0;
    }
    #catering .del-menu-item .added-item {
        display: none;
        margin-top: 35px;
        padding: 30px;
        background: #d6dbdf;
    }
    #catering .del-menu-item .added-item .remove {
        display: block;
        float: right;
        width: 32px;
        height: 32px;
        line-height: 30px;
        text-align: center;
        color: #253037;
        border: 1px solid #253037;
        border-radius: 99px;
        font-family: times;
        text-decoration: none !important;
    }

<section id="catering">
    <div class="container" style="display: block;">
    <div class="deliver">
        <a onclick = "myFunction()" class="delivery-menu" href="#">Main</a>
        <div class="del-menu-con" style="display: none;">
            <div id = "myDropdown" class="del-menu-item">
                <h3>Lobster Roll (380 cal) <span>$17</span></h3>
                <p>¼ lb of lobster atop a buttered, toasted New-England style split-top bun with a swipe of mayo, a sprinkle of lemon butter and a dash of our secret spices.</p>
                <div class="pull-right">
                    Qty<br>
                    <input type="text"><a class="add">Add</a>
                </div>
                <div class="added-item">
                    <span></span> <a class="remove" href="#">&times;</a>
                </div>
            </div>
        </div>
    </div>
    <div class="deliver">
        <a onclick = "myFunction()" class="delivery-menu" href="#">Soup</a>
        <div class="del-menu-con" style="display: none;">
            <div id = "myDropdown" class="del-menu-item">
                <h3>Lobster Roll (380 cal) <span>$17</span></h3>
                <p>¼ lb of lobster atop a buttered, toasted New-England style split-top bun with a swipe of mayo, a sprinkle of lemon butter and a dash of our secret spices.</p>
                <div class="pull-right">
                    Qty<br>
                    <input type="text"><a class="add">Add</a>
                </div>
                <div class="added-item">
                    <span></span> <a class="remove" href="#">&times;</a>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

您有几个问题。以下脚本....

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

...如您所见，它正在尝试切换 ID 为 myDropdown

的元素

问题 1:

您有多个 ID 为 myDropdown 的元素。元素永远不应该共享一个 ID。为此使用类，并为元素使用唯一 ID。

问题 2:

您尝试定位的 myDropdown 元素不是隐藏元素。它的 parent 是。 #myDropdown 类 del-menu-item 在你的 css 中是 display:block。你在它的父级上的内联样式是目前隐藏它的东西。因此，您的切换(如果您的 ID 已修复)将切换隐藏元素内的元素。你永远不会看到它。

<div class="del-menu-con" style="display: none;">
    <div id = "myDropdown" class="del-menu-item">
    ...
    </div>
</div>

问题 3:

您正试图在这些元素上切换类“显示”。您的 CSS 中不存在该类。您的菜单根本没有显示，因为它具有内联样式 display:none 在其父项上。所以即使修复了 1 和 2，它也不会工作，因为 .show 类什么都不做。

解决方案:

修复您的代码，使您拥有唯一的 ID。

重组您的元素，以便您的实际下拉 div 是隐藏元素，或者更改您的 javascript 以切换隐藏的父元素

为 .show 添加适当的类到您的 CSS。