下拉菜单的展开和收缩可以通过和javascript实现。1）使用css的:hover伪类可以简单实现，但不适合触摸屏。2）javascript方法通过toggledropdown函数和监听器实现更灵活的控制，适合触摸屏和现代web应用。

  

  实现下拉菜单的展开和收缩在JavaScript中其实非常有趣，也是一个很好的实践机会。让我们从基础开始，逐渐深入到更高级的实现方式。

  首先，我们要知道什么是下拉菜单？简单来说，它是一个UI元素，当你点击它时，会显示或隐藏一组选项。这在用户界面设计中非常常见，比如导航菜单、选择框等。

  让我们从一个简单的实现开始。这个方法使用纯JavaScript和HTML，没有任何框架，这样可以帮助我们理解基本原理。

  

Dropdown Menu Example

    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    .dropdown:hover .dropdown-content {
        display: block;
    }




Dropdown

    [Link 1][2]
    [Link 2][3]
    [Link 3][4]

  登录后复制

  这个例子使用了CSS来控制菜单的显示和隐藏。通过:hover伪类，当鼠标悬停在按钮上时，下拉菜单会显示出来。这种方法简单直接，但有一个问题：它依赖于鼠标悬停，不适合触摸屏设备。

  让我们来看看如何使用JavaScript来实现更灵活的控制。以下是一个使用JavaScript的例子：

  

Dropdown Menu Example with JavaScript

    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }




Dropdown

    [Link 1][2]
    [Link 2][3]
    [Link 3][4]



function toggleDropdown() {
    document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
    if (!event.target.matches('.dropdown button')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}