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

...正如您所看到的那样，尝试切换标识为myDropdown

的元素

问题1：

您有多个ID为myDropdown的项目。项目永远不应共享ID。使用类，以及元素的唯一ID。

问题2：

您尝试定位的myDropdown元素不是隐藏元素。它的父母是。在您的CSS中，#myDropdown类del-menu-item为display:block。你的父母的内联风格是目前隐藏它的内容。因此，您的切换（如果您的ID已修复）将切换隐藏元素内的元素。你永远不会看到它。

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

问题3：

您正在尝试切换课程＆＃39; show＆＃39;在这些元素上。您的CSS中不存在该类。您的菜单根本没有显示，因为它具有内联显示样式：没有它的父母。因此，即使修复了1和2，它也不会起作用，因为课程.show什么都不做。

<强>解决方案：

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

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

将适当的.show类添加到CSS中。

点击它时，下拉列表无效

1 个答案: