Question

我正在使用 TailwindCSS 构建自定义下拉列表

<div class="container mx-auto">
                <div class="px-4 mt-3 lg:mt-0">
                    <div class="bg-white overflow-hidden shadow-xl rounded-lg mx-auto">
                        <div class="py-4 w-full border-r border-gray-300">
                            <h2 class="text-gray-900 text-xl mb-3 px-4">All Courses</h2>
                            <div class="relative mt-1 px-4 grid grid-cols-12">
                                <div class="col-span-12 lg:col-span-10">
                                    <input class="shadow appearance-none border rounded-none border-gray-300 rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline lg:rounded-r-none" type="search" placeholder="Search a course...">
                                </div>
                                <div class="col-span-12 lg:col-span-2">
                                    <!-- To be separated on his own component later -->
                                    <button @click="openfilterDropdown = !openfilterDropdown" class="lg:rounded-l-none mt-2 lg:mt-0 bg-gray-200 transition ease-in-out duration-300 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded inline-flex items-center w-full">
                                        <span class="mx-auto">
                                            <i class="fas fa-filter mr-2"></i>
                                            Select Filter
                                        </span>
                                    </button>

                                    <transition name="fadeUp" appear>
                                        <div v-if="openfilterDropdown" class="right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-50 w-full">
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                            <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"><span class="text-gray-600">Category 1</span></a>
                                        </div>
                                    </transition>
                                    <!-- -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

问题是，当它“打开”时，父容器会展开。

如何才能在下拉菜单打开时不展开其父容器，使其看起来就像关闭时一样，但显示下拉项目？

Answer 1

<div class="relative mt-1 px-4 grid grid-cols-12"> 包含位于“白色”容器内的下拉菜单。

您需要使下拉菜单相对于其父级显示在其上方。

这是演示：https://play.tailwindcss.com/kW9w90OJW5

TailwindCSS 自定义下拉扩展父级

1 个答案: