javascript - 保持来自不同父 div 的按钮同时处于活动状态

Question

我想同时保持来自不同父 div 的按钮处于活动状态，就像：

例如，在我的项目中，我不能同时选择 Limit 和 Cross 3x。当一个按钮获得焦点时，来自另一个父 div 的另一个按钮不会保持活动状态。

有没有办法做到这一点？我在这个项目中使用 TailwindCSS 和 AlpineJS。这是我的代码：

<div class="px-16 py-6 mt-2 bg-white shadow-sm">
      <div>
         <div class="sm:hidden">
            <select aria-label="Selected tab" class="block w-full form-select">
               <option selected>Spot</option>
               <option>Cross 3x</option>
               <option>Isolada 10x</option>
            </select>
         </div>
         <div class="hidden sm:block md:flex md:flex-row md:justify-between">
            <nav class="flex">
               <button type="button" class="px-4 py-1 text-sm font-medium leading-5 text-gray-500 active:text-indigo-700 focus:no-underline hover:no-underline hover:text-gray-700 focus:outline-none focus:text-indigo-600 focus:bg-indigo-100 bg-indigo-50" autofocus aria-current="page">
                  Spot
               </button>
               <button type="button" class="px-4 py-1 text-sm font-medium leading-5 text-gray-500 active:text-indigo-700 focus:no-underline hover:no-underline hover:text-gray-700 focus:outline-none focus:text-indigo-600 focus:bg-indigo-100 bg-indigo-50">
                  Cross 3x
               </button>
               <button type="button" class="px-4 py-1 text-sm font-medium leading-5 text-gray-500 active:text-indigo-700 focus:no-underline hover:no-underline hover:text-gray-700 focus:outline-none focus:text-indigo-600 focus:bg-indigo-100 bg-indigo-50">
                  Isolada 10x
               </button>
            </nav>
            <!-- Dots Vertical -->
            <div class="hidden md:flex" id="nav-heading" aria-labelledby="nav-heading" x-data="{ dotsOpen: false }" :aria-expanded="dotsOpen">
               <button type="button" :aria-expanded="dotsOpen" aria-controls="nav-list" @mouseenter="dotsOpen = !dotsOpen" @click.away="dotsOpen = false">
                  <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                  </svg>
               </button>
               <div x-show.transition.in.duration.100ms.origin.top.left.opacity.scale.10.out.duration.100ms.origin.bottom.right.opacity.scale.10="dotsOpen" id="nav-list" class="absolute z-10 w-auto mt-8 -ml-8 origin-right rounded-md shadow-lg">
                  <!--
                     Dots dropdown panel, show/hide based on dropdown state.
                  -->
                  <div @mouseleave="dotsOpen = !dotsOpen" class="py-1 bg-white rounded-md shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                     <button type="button" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
                        <p class="flex justify-start font-medium">Regras de Trading</p>
                     </button>
                     <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
                        <p class="flex justify-start font-medium">FAQ</p>
                     </a>
                     <button type="button" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
                        <p class="flex justify-start font-medium">Spot Tutorial</p>
                     </button>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div>
         <div class="sm:hidden">
            <select aria-label="Selected tab" class="block w-full py-2 pl-3 pr-10 mt-2 text-base leading-6 transition duration-150 ease-in-out border-gray-300 form-select focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
               <option selected>Limit</option>
               <option>Make Order</option>
               <option>Stop-limit</option>
            </select>
         </div>
         <div class="hidden sm:block">
            <div class="border-b border-gray-200">
               <nav class="flex mt-1 -mb-px">
                  <button type="button" class="px-1 py-2 ml-8 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent hover:no-underline focus:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-indigo-500 focus:border-indigo-500 active:text-indigo-500" autofocus aria-current="page">
                     Limit
                  </button>
                  <button type="button" class="px-1 py-2 ml-8 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent hover:no-underline focus:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-indigo-500 focus:border-indigo-500 active:text-indigo-500">
                     Make Order
                  </button>
                  <div class="flex flex-row items-center justify-center ml-8" id="nav-heading" aria-labelledby="nav-heading" x-data="{ stopLimitOpen: false }" :aria-expanded="stopLimitOpen">
                     <svg class="pb-0.5 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                     </svg>
                     <button type="button" class="px-1 py-2 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent hover:no-underline focus:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-indigo-500 focus:border-indigo-500 active:text-indigo-500">
                        Stop-limit
                     </button>
                     <button class="pb-0.5 focus:outline-none" type="button" :aria-expanded="stopLimitOpen" aria-controls="nav-list" @mouseenter="stopLimitOpen = !stopLimitOpen" @click.away="stopLimitOpen = false">
                        <svg class="w-3 h-3 ml-1 cursor-pointer" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                     </button>
                     <div x-show.transition.in.duration.100ms.origin.top.left.opacity.scale.10.out.duration.100ms.origin.bottom.right.opacity.scale.10="stopLimitOpen" id="nav-list" class="absolute z-10 w-auto origin-center rounded-md shadow-lg mt-28">
                        <!--
                           Stop Limit dropdown panel, show/hide based on dropdown state.
                        -->
                        <div @mouseleave="stopLimitOpen = !stopLimitOpen" class="py-1 bg-white rounded-md shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                           <button type="button" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
                              <p class="flex justify-start font-medium">Stop-Limit</p>
                           </button>
                           <button type="button" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
                              <p class="flex justify-start font-medium">OCO</p>
                           </button>
                        </div>
                     </div>
                  </div>
               </nav>
            </div>
         </div>
      </div>
      <!-- Buy/Sell Bitcoin Table -->
      <div class="grid grid-cols-2 gap-16 mt-4">
         <div class="col-span-1">
            <div class="flex flex-row items-center justify-between">
               <h4>Comprar BTC</h4>
               <div class="flex flex-row items-center justify-center">
                  <svg aria-label="Lista" data-balloon-pos="up" id="show-tip" class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
                  </svg>&nbsp;
                  <p class="text-gray-600">- USDT</p>
               </div>
            </div>
         </div>
         <div class="col-span-1">
            <div class="flex flex-row items-center justify-between">
               <h4>Vender BTC</h4>
               <div class="flex flex-row items-center justify-center">
                  <svg aria-label="Lista" data-balloon-pos="up" id="show-tip" class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
                  </svg>&nbsp;
                  <p class="text-gray-600">- USDT</p>
               </div>
            </div>
         </div>
      </div>
   </div>

标签： javascripthtmlcsstailwind-cssalpine.js