如何使菜单在顺风css中滚动时始终打开和关闭

Question

我正在使用Tailwind开发一个网站。我想让导航菜单的级别2在向下滚动时始终打开和关闭。我尝试使用display: block，但我得到的是，它覆盖了flex规则。我确实在"ul“标签中使用了一个三元代码，但它不起作用。

请看我的期望截图：

​

​

目前，我将open类放在ul标记中，试图使Level 2始终打开。我真的很感谢你的意见

​

@tailwind base;
@tailwind components;
@tailwind utilities;

.work-sans {
    font-family: 'Work Sans', sans-serif;
}
        
#menu-toggle:checked + #menu {
    display: block;
}

.hover\:grow {
    transition: all 0.3s;
    transform: scale(1);
}

.hover\:grow:hover {
    transform: scale(1.02);
}

.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
}

.carousel-item {
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
    display: block;
}

.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
    color: #000;
    /*Set to match the Tailwind colour you want the active one to be */
}

.mega-menu {
    display: none;
    left: 0px;
    position: absolute;
    text-align: left;
    width: 100%;
}

.mega-menu > .open {
    height: auto!important;
    visibility: visible!important;
}

.hoverable {
    position: static;
}

.hoverable > a:after {
   content: "\25BC";
   font-size: 10px;
   padding-left: 12px;
   position: relative;
   top: -1px;
}

.hoverable:hover .mega-menu {
   display: flex;
}

<div class="hidden md:flex md:items-center md:w-auto w-full order-3 md:order-1" id="menu">
                <nav>
                    <ul class="md:flex flex-wrap items-center justify-between text-base text-gray-700 pt-4 md:pt-0">
                        <li class="hoverable text-gray-500 hover:text-black">
                            <a class="relative inline-block no-underline text-base hover:text-black py-1.5 px-4" href="#">Shop</a>
                            <ul class="flex flex-row h-auto bg-gray-300 p-2 mega-menu open">
                                <li class="pl-7">
                                    <a class="text-sm">Prams & Strollers</a>
                                    <!--Cards for Level 3 - design in card-->
                                    <!--<div>
                                        
                                        <p></p>
                                        <a>Jive3</a>
                                        <a>Jive3 Platinum</a>
                                        <a>Metro</a>
                                        <a>Jive</a>
                                        <a>Explore more</a>
                                    </div>-->
                                </li>
                                <li class="px-5"><a class="text-sm">Baby Carriers</a></li>
                                <li class="px-5"><a class="text-sm">Nursey</a></li>
                                <li class="px-5"><a class="text-sm">Feeding</a></li>
                                <li class="px-5"><a class="text-sm">Bundles</a></li>
                                <li class="px-5"><a class="text-sm">Capsules</a></li>
                                <li class="px-5"><a class="text-sm">Accessories</a></li>
                                <li class="px-5"><a class="text-sm">Need help deciding?</a></li>
                            </ul>
                        </li>
                        <li class="hoverable text-gray-500 hover:text-black">
                            <a class="relative inline-block no-underline text-base hover:text-black py-1.5 px-4" href="#">Demonstrations</a>
                            <ul class="flex flex-row h-auto bg-gray-300 p-2 mega-menu">
                                <li class="pl-7">
                                    <a class="text-sm">Demos on Demand</a>
                                    <!--Cards for Level 3 - design in card-->
                                    <!--<div>
                                        
                                        <p></p>
                                        <a>Jive3</a>
                                        <a>Jive3 Platinum</a>
                                        <a>Metro</a>
                                        <a>Jive</a>
                                        <a>Explore more</a>
                                    </div>-->
                                </li>
                                <li class="px-5"><a class="text-sm">In-Person</a></li>
                                <li class="px-5"><a class="text-sm">Events & Expos</a></li>
                                <li class="px-5"><a class="text-sm">Live Q&A</a></li>
                            </ul>
                        </li>
                        <li class="hoverable text-gray-500 hover:text-black">
                            <a class="relative inline-block no-underline text-base hover:text-black py-1.5 px-3" href="#">About Us</a>
                            <ul class="flex flex-row h-auto bg-gray-300 p-2 mega-menu">
                                <li class="pl-7">
                                    <a class="text-sm">For Purpose</a>
                                    <!--Cards for Level 3 - design in card-->
                                    <!--<div>
                                        
                                        <p></p>
                                        <a>Jive3</a>
                                        <a>Jive3 Platinum</a>
                                        <a>Metro</a>
                                        <a>Jive</a>
                                        <a>Explore more</a>
                                    </div>-->
                                </li>
                                <li class="px-5"><a class="text-sm">Our Origins</a></li>
                                <li class="px-5"><a class="text-sm">Why Redsbaby?</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>

            <!--Logo section-->

            <div class="order-1 md:order-2">
                <a class="flex items-center tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#">
                    Redsbaby
                </a>
            </div>

            <!--Search, Profile, Cart-->

            <div class="order-2 md:order-3 flex items-center" id="nav-content">

                <a class="inline-block no-underline text-base text-gray-500 hover:text-black" href="#">Need help?</a>
                <a class="pl-5 inline-block no-underline text-gray-500 hover:text-black" href="#">
                    <svg xmlns="http://www.w3.org/2000/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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </a>

                <a class="pl-5 inline-block no-underline text-gray-500 hover:text-black" href="#">
                    <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <circle fill="none" cx="12" cy="7" r="3" />
                        <path d="M12 2C9.243 2 7 4.243 7 7s2.243 5 5 5 5-2.243 5-5S14.757 2 12 2zM12 10c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3S13.654 10 12 10zM21 21v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h2v-1c0-2.757 2.243-5 5-5h4c2.757 0 5 2.243 5 5v1H21z" />
                    </svg>
                </a>

                <a class="pl-5 pr-3 inline-block no-underline text-gray-500 hover:text-black" href="#">
                    <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <path d="M21,7H7.462L5.91,3.586C5.748,3.229,5.392,3,5,3H2v2h2.356L9.09,15.414C9.252,15.771,9.608,16,10,16h8 c0.4,0,0.762-0.238,0.919-0.606l3-7c0.133-0.309,0.101-0.663-0.084-0.944C21.649,7.169,21.336,7,21,7z M17.341,14h-6.697L8.371,9 h11.112L17.341,14z" />
                        <circle cx="10.5" cy="18.5" r="1.5" />
                        <circle cx="17.5" cy="18.5" r="1.5" />
                    </svg>
                </a>

            </div>

​

Answer 1

我设法通过使用高山JS添加了这些功能。我添加了如下内容：

​

<div x-data="{ open: true }">
   <div class="flex w-full">
      <span class="pl-20 pr-1 pb-3 no-underline text-base hover:text-black">Shop</span>
       <button @click="open = !open" class="flex items-center justify-between pb-3 text-gray-500 hover:text-gray-700 focus:outline-none">
           <span>
               <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path x-show="! open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" style="display: none;" />
                   <path x-show="open" d="M19 9L12 16L5 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   </path>
                </svg>
            </span>
         </button>
    </div>
                                
    <div x-show="open" x-transition:enter="transition ease-out duration-150 transform" x-transition:enter-start="opacity-0 -translate-y-5" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150 transform" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-5" class="w-screen py-3 pl-6 mega-menu mb-16 sm:mb-0 shadow-sm flex flex-row h-auto bg-rb_gray-light">
           <a class="text-sm pl-20 hover:text-black" href="#">Prams & Strollers</a>
           <a class="text-sm px-5 hover:text-black" href="#">Nursey</a>
           <a class="text-sm px-5 hover:text-black" href="#">Feeding</a>
           <a class="text-sm px-5 hover:text-black" href="#">Bundles</a>
           <a class="text-sm px-5 hover:text-black" href="#">Capsules</a>
           <a class="text-sm px-5 hover:text-black" href="#">Accessories</a>
           <a class="text-sm px-5 hover:text-black" href="#">Need help deciding?</a>
     </div>
</div>

​

请在此处阅读Alpinejs文档：https://alpinejs.dev/directives/data