如何正确显示/隐藏移动菜单 onclick

Posted 2023-03-06

【中文标题】如何正确显示/隐藏移动菜单 onclick

【英文标题】：How to properly show/hide mobile menu onclick

【发布时间】：2021-07-04 11:06:33

【问题描述】：

我有这个 html 来显示菜单以及菜单的移动版本。但是移动版本不能正常工作。你知道什么是必须先显示菜单 svg 图标，隐藏移动菜单，然后在打开菜单的按钮上单击显示移动菜单和关闭 svg 图标？

由于它在移动版本上，菜单已经显示为打开，并带有关闭按钮，但按钮不会隐藏菜单。

例子：

https://jsfiddle.net/2vjo0gnc/

HTML

    <div class="relative bg-gray-50 overflow-hidden">
      <div class="max-w-7xl mx-auto">
        <div class="relative z-10 pb-8 bg-gray-50 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">


          <div class="relative pt-6 px-4 sm:px-6 lg:px-8">
            <nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
              <div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
                <div class="flex items-center justify-between w-full md:w-auto">
                  <div class="flex">
                   
                    <span class="text-xl text-3xl font-bold">logo</span>
                  </div>
                  <div class="-mr-2 flex items-center md:hidden">
                    <button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false">
                      <span class="sr-only">Open main menu</span>
                 
                    </button>
                  </div>
                </div>
              </div>
              <div class="hidden md:block md:ml-10 mt-2 md:pr-4 md:space-x-8">

                <a id="aboutUs" href="#" class="font-medium text-gray-500 hover:text-gray-900">Link 1</a>

                <a id="ourTeam" href="#" class="font-medium text-gray-500 hover:text-gray-900">Link 2</a>


                <a id="blog" href="#" class="font-medium text-gray-500 hover:text-gray-900">Link 3</a>

                <a href="#" class="contact font-medium">Link 4</a>
              </div>
            </nav>
          </div>

          <!--
              Mobile menu, show/hide based on menu open state.

              Entering: "duration-150 ease-out"
                From: "opacity-0 scale-95"
                To: "opacity-100 scale-100"
              Leaving: "duration-100 ease-in"
                From: "opacity-100 scale-100"
                To: "opacity-0 scale-95"
            -->
          <div class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
            <div class="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
              <div class="px-5 pt-4 flex items-center justify-between">
                <div class="flex">
                 
                 
                  <span class="text-xl text-3xl font-bold text-gray-600">logo</span>
                </div>
                <div class="-mr-2">
                  <button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                    <span class="sr-only">Close main menu</span>
                    <!-- Heroicon name: outline/x -->
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke- d="M6 18L18 6M6 6l12 12" />
                    </svg>
                    <svg id="open-mobile-nav-btn"  xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 " viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
                                </svg>
                    
                  </button>
                </div>
              </div>
              <div class="px-2 pt-2 pb-3 space-y-1">

                <a id="features" href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Link 1</a>

                <a id="ourTeam" href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Link 2</a>

                <a id="blog" href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Link 3</a>

                <a href="#" class="contact block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Link4</a>

              </div>

            </div>
          </div>

          <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
            <div class="sm:text-center lg:text-left">
              <h1 class="text-4xl tracking-tight font-extrabold text-gray-600 sm:text-5xl md:text-6xl">
                <span class="block xl:inline">Test</span>
                <span class="block xl:inline">title</span>
              </h1>

            </div>
          </main>
        </div>
      </div>
      <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
        <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/" >
      </div>
    </div>

  </body>
</html>

JS

    const nav = document.querySelector('#mobile-nav');
    const closeBtn = document.getElementById('close-mobile-nav-btn');

    closeBtn.addEventListener('click', () => 
        console.log('show/ hide the menu');
    );

【参考方案1】：

你需要 javascript 来做到这一点。有一个变量isOpen，它检查它是打开（true）还是关闭（false），根据它控制导航和按钮。

Tailwind 不提供 Javascript 而是提供了 html 中的 cmets 用什么来获得想要的开合效果。