HTML+Tailwind CSS下拉菜单问题：空白点击不关闭/小屏不显示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修复后的下拉菜单</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <nav class="bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <img class="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Logo">
                    </div>
                    <!-- 桌面端导航 -->
                    <div class="hidden md:flex ml-10 items-baseline space-x-4">
                        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">首页</a>
                        <!-- 桌面端下拉菜单容器 -->
                        <div class="relative" id="desktop-dropdown">
                            <button id="desktop-dropdown-btn" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium flex items-center">
                                下拉菜单
                                <svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                </svg>
                            </button>
                            <!-- 下拉菜单内容 -->
                            <div id="desktop-dropdown-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">选项1</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">选项2</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">选项3</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 移动端菜单触发按钮 -->
                <div class="-mr-2 flex md:hidden">
                    <button id="mobile-menu-btn" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">首页</a>
                <!-- 移动端下拉菜单 -->
                <div class="relative" id="mobile-dropdown">
                    <button id="mobile-dropdown-btn" class="text-gray-300 hover:bg-gray-700 hover:text-white block w-full px-3 py-2 rounded-md text-left text-base font-medium flex items-center justify-between">
                        下拉菜单
                        <svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div id="mobile-dropdown-menu" class="hidden pl-4 space-y-1">
                        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">选项1</a>
                        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">选项2</a>
                        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">选项3</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <script>
        // 桌面端下拉菜单逻辑
        const desktopBtn = document.getElementById('desktop-dropdown-btn');
        const desktopMenu = document.getElementById('desktop-dropdown-menu');
        const desktopContainer = document.getElementById('desktop-dropdown');

        desktopBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            desktopMenu.classList.toggle('hidden');
        });

        // 点击空白关闭桌面端下拉
        document.addEventListener('click', (e) => {
            if (!desktopContainer.contains(e.target)) {
                desktopMenu.classList.add('hidden');
            }
        });

        // 移动端菜单触发逻辑
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');

        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // 移动端下拉菜单逻辑
        const mobileDropdownBtn = document.getElementById('mobile-dropdown-btn');
        const mobileDropdownMenu = document.getElementById('mobile-dropdown-menu');
        const mobileDropdownContainer = document.getElementById('mobile-dropdown');

        mobileDropdownBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            mobileDropdownMenu.classList.toggle('hidden');
        });

        // 点击空白关闭移动端下拉
        document.addEventListener('click', (e) => {
            if (!mobileDropdownContainer.contains(e.target)) {
                mobileDropdownMenu.classList.add('hidden');
            }
        });
    </script>
</body>
</html>

1. 点击空白区域关闭下拉菜单 #

• 给document添加全局点击监听，判断点击目标是否属于下拉菜单容器，若不属于则给菜单添加hidden类关闭
• 在下拉按钮的点击事件中加入e.stopPropagation()，避免按钮点击触发全局事件导致菜单刚打开就关闭

2. 中等屏幕以下下拉菜单不显示 #

• 新增独立的移动端下拉菜单结构，用md:hidden控制仅在中等及以下屏幕显示
• 给移动端菜单添加专属交互逻辑，确保小屏幕下能正常展开/收起
• 原桌面端下拉菜单用hidden md:flex控制仅在中等以上屏幕显示，避免和移动端菜单冲突

内容的提问来源于stack exchange，提问作者Hakim Lord