单击一个时，同一行中的两个 div 展开两个顺风 css Django alpine js答案

【问题标题】：Two divs in same row when click on one expand both tailwind css Django alpine js单击一个时，同一行中的两个 div 展开两个顺风 css Django alpine js
【发布时间】：2022-07-11 14:52:13
【问题描述】：

家长

   <div class="flex flex-wrap justify-between gap-x-4 mt-8">
    
</div>

孩子

<div x-init x-data="{expanded: false}" :class="expanded ? 'h-full' : 'h-12'" class="w-full md:w-48/100 flex flex-col">
<div @click="expanded = !expanded" class="flex items-center px-10 py-4 border-b bg-white rounded-lg cursor-pointer">
    <div class="font-bold font-lato text-xsm bg-white">{{ value.question }}</div>
    <div class="ml-auto p-2">
        <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.77083 0.937549C7.68535 0.850049 7.57545 0.812549 7.46555 0.812549C7.35565 0.812549 7.23354 0.862549 7.16027 0.937549L4.03424 4.11255L0.932622 0.937549C0.847145 0.850049 0.725034 0.800049 0.615134 0.800049C0.505234 0.800049 0.383123 0.850049 0.309857 0.925049C0.138902 1.10005 0.138902 1.38755 0.309857 1.56255L3.71675 5.06255C3.8877 5.23755 4.16856 5.23755 4.33951 5.06255L7.75862 1.57505C7.94178 1.40005 7.94178 1.11255 7.77083 0.937549Z"
                  fill="#080F33">
            </path>
        </svg>
    </div>
</div>
<div x-show="expanded" class="px-10 py-4 text-left font-lato bg-gray-50 text-gray-500 flex-1">
    {{ value.answer|richtext }}
</div>

【问题讨论】：

那么您的问题到底是什么？查看第二张图片，它已经按预期工作了，对吧？
另一个不应该展开

标签： django tailwind-css alpine.js

【解决方案1】：

我一直在查看您的代码 sn-p。您的正确选择没有扩大。看起来可能是这样，因为您当前的 HTML/CSS 正在扩展父容器。如果您想要 2 个单独的列，则需要在 HTML/CSS 中这样设置：

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <style>
      .md-w-48\/100 {
        width: 48%;
      }
    </style>
  </head>
  <body>
    <div class="flex flex-row flex-wrap w-full">
      <div class="flex flex-row flex-wrap w-full mt-8 px-6 xl:px-0">
        <h2 class="text-4xl font-mont font-bold md:text-left text-center">Casino &amp; Gambling FAQs</h2>
      </div>
      <div class="max-w-7xl mt-8 px-6 xl:px-0 w-1/2 inline-block">
        <div class="flex flex-col flex-wrap justify-between w-full">
          <div class="flex flex-wrap flex-row justify-between mt-8 w-full">
            <div x-init="" x-data="{expanded: false}" :class="expanded ? 'h-full' : 'h-12'" class="w-full flex flex-wrap flex-col h-12">
              <div @click="expanded = !expanded" class="flex items-center px-10 py-4 border-b bg-white rounded-lg cursor-pointer">
                <div class="font-bold font-lato text-xsm bg-white">question</div>
                <div class="ml-auto p-2">
                  <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.77083 0.937549C7.68535 0.850049 7.57545 0.812549 7.46555 0.812549C7.35565 0.812549 7.23354 0.862549 7.16027 0.937549L4.03424 4.11255L0.932622 0.937549C0.847145 0.850049 0.725034 0.800049 0.615134 0.800049C0.505234 0.800049 0.383123 0.850049 0.309857 0.925049C0.138902 1.10005 0.138902 1.38755 0.309857 1.56255L3.71675 5.06255C3.8877 5.23755 4.16856 5.23755 4.33951 5.06255L7.75862 1.57505C7.94178 1.40005 7.94178 1.11255 7.77083 0.937549Z" fill="#080F33">
                    </path>
                  </svg>
                </div>
              </div>
              <div x-show="expanded" class="px-10 py-4 text-left font-lato bg-gray-50 text-gray-500 flex-1" style="display: none;">
                'just a bunch of text'
              </div>    
            </div>
          </div>
          <div class="flex flex-wrap flex-row justify-between mt-8 w-full">
            <div x-init="" x-data="{expanded: false}" :class="expanded ? 'h-full' : 'h-12'" class="w-full flex flex-wrap flex-col h-12">
              <div @click="expanded = !expanded" class="flex items-center px-10 py-4 border-b bg-white rounded-lg cursor-pointer">
                <div class="font-bold font-lato text-xsm bg-white">question</div>
                <div class="ml-auto p-2">
                  <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.77083 0.937549C7.68535 0.850049 7.57545 0.812549 7.46555 0.812549C7.35565 0.812549 7.23354 0.862549 7.16027 0.937549L4.03424 4.11255L0.932622 0.937549C0.847145 0.850049 0.725034 0.800049 0.615134 0.800049C0.505234 0.800049 0.383123 0.850049 0.309857 0.925049C0.138902 1.10005 0.138902 1.38755 0.309857 1.56255L3.71675 5.06255C3.8877 5.23755 4.16856 5.23755 4.33951 5.06255L7.75862 1.57505C7.94178 1.40005 7.94178 1.11255 7.77083 0.937549Z" fill="#080F33">
                    </path>
                  </svg>
                </div>
              </div>
              <div x-show="expanded" class="px-10 py-4 text-left font-lato bg-gray-50 text-gray-500 flex-1" style="display: none;">
                'just a bunch of text'
              </div>    
            </div>
          </div>
        </div>
      </div>
      <div class="max-w-7xl mt-8 px-6 xl:px-0 w-1/2 inline-block">
        <div class="flex flex-col flex-wrap justify-between w-full">
          <div class="flex flex-wrap flex-row justify-between mt-8 w-full">
            <div x-init="" x-data="{expanded: false}" :class="expanded ? 'h-full' : 'h-12'" class="w-full flex flex-wrap flex-col h-12">
              <div @click="expanded = !expanded" class="flex items-center px-10 py-4 border-b bg-white rounded-lg cursor-pointer">
                <div class="font-bold font-lato text-xsm bg-white">question</div>
                <div class="ml-auto p-2">
                  <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.77083 0.937549C7.68535 0.850049 7.57545 0.812549 7.46555 0.812549C7.35565 0.812549 7.23354 0.862549 7.16027 0.937549L4.03424 4.11255L0.932622 0.937549C0.847145 0.850049 0.725034 0.800049 0.615134 0.800049C0.505234 0.800049 0.383123 0.850049 0.309857 0.925049C0.138902 1.10005 0.138902 1.38755 0.309857 1.56255L3.71675 5.06255C3.8877 5.23755 4.16856 5.23755 4.33951 5.06255L7.75862 1.57505C7.94178 1.40005 7.94178 1.11255 7.77083 0.937549Z" fill="#080F33">
                    </path>
                  </svg>
                </div>
              </div>
              <div x-show="expanded" class="px-10 py-4 text-left font-lato bg-gray-50 text-gray-500 flex-1" style="display: none;">
                'just a bunch of text'
              </div>    
            </div>
          </div>
          <div class="flex flex-wrap flex-row justify-between mt-8 w-full">
            <div x-init="" x-data="{expanded: false}" :class="expanded ? 'h-full' : 'h-12'" class="w-full flex flex-wrap flex-col h-12">
              <div @click="expanded = !expanded" class="flex items-center px-10 py-4 border-b bg-white rounded-lg cursor-pointer">
                <div class="font-bold font-lato text-xsm bg-white">question</div>
                <div class="ml-auto p-2">
                  <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.77083 0.937549C7.68535 0.850049 7.57545 0.812549 7.46555 0.812549C7.35565 0.812549 7.23354 0.862549 7.16027 0.937549L4.03424 4.11255L0.932622 0.937549C0.847145 0.850049 0.725034 0.800049 0.615134 0.800049C0.505234 0.800049 0.383123 0.850049 0.309857 0.925049C0.138902 1.10005 0.138902 1.38755 0.309857 1.56255L3.71675 5.06255C3.8877 5.23755 4.16856 5.23755 4.33951 5.06255L7.75862 1.57505C7.94178 1.40005 7.94178 1.11255 7.77083 0.937549Z" fill="#080F33">
                    </path>
                  </svg>
                </div>
              </div>
              <div x-show="expanded" class="px-10 py-4 text-left font-lato bg-gray-50 text-gray-500 flex-1" style="display: none;">
                'just a bunch of text'
              </div>    
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

如您所见，我已将您的列拆分为 2 个不同的 inline-block 元素。这样，它就不会被视为一个父级，扩展一个子级不会扩展另一侧的容器。

【讨论】：