javascript Tailwind如何在设备较小时显示div

yxyvkwin 于 2023-01-01 发布在 Java

关注(0)|答案(2)|浏览(130)

我有简单的2个div。当设备是小的第二个div显示菜单图标。我想要的是当我点击菜单按钮的第一个div应该出现溢出/侧弹出
我还创建了顺风播放链接https://play.tailwindcss.com/2msoAWR8rp
你可以看到，如果设备是中型或大型有一节的消息，当设备是小型的，它将隐藏和菜单图标出现在第二个div。现在我不能显示第一个div像溢出或某种滑块。
预览时，设备小第一是隐藏我需要显示这当我点击图标。

JavaScript

来源：https://stackoverflow.com/questions/74967517/tailwind-how-to-show-div-on-click-when-device-is-small

2条答案

按热度按时间

lo8azlld1#

首先，你可以通过给侧边栏一个特定的宽度来开始这个解决方案。然后你需要确保侧边栏在大屏幕上是一个块，但是在小屏幕上是向左40个单位（40 =侧边栏宽度）。毕竟，你可以通过给按钮一个侧边栏的id来用一个简单的javascript代码澄清这个问题。希望它能有所帮助，新年快乐：）
请查看整页上的代码。

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div class="flex flex-row max-h-screen">
    <!-- hidden w-full md:block md:w-auto -->
    <div class="mt-8 ml-5 w-40 max-md:-ml-40 md:block" id="navbar-default">

      <div class="mt-4 h-5/6 overflow-y-scroll" data-collapse-toggle="navbar-default">
        <div class="cursor-pointer">
          <div class=" py-2 px-2">
            <div class="flex justify-between pb-3">
              <div class="flex">

                <div class="flex flex-col pl-2">
                  <div class="font-bold text-base">
                    john
                  </div>
                  <div class="font-normal text-xs pt-1">
                    hye
                  </div>
                </div>
              </div>
              <div class="flex flex-col items-end">
                <div class="font-medium text-xs">
                  24may
                </div>

              </div>
            </div>
            <div class="flex-grow border-t border-gray-200"></div>
          </div>
        </div>

      </div>
    </div>
    <div class="flex flex-col">
      <div class=" h-full w-0.5 ml-4 mr-4 flex-grow bg-gray-200"></div>
    </div>
    <div class="w-9/12 mt-5 mb-5 mr-5">
      <div class=" bg-white shadow-lg rounded-2xl  h-full flex flex-1 flex-col justify-between">
        <div>
          <div class="flex justify-between p-4">
            <div class="flex">
              <div id="button" class="flex md:hidden " data-bs-target="navbar-d">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                </svg>
              </div>
              <img src="{{data[activeMsgIndex].userImage}}" class="h-10 w-10 rounded-full object-cover">
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $("#button").click(function() {
      $("#navbar-default").toggleClass('!ml-0')
    });
  </script>
</body>

</html>

赞(0）回复(0）举报 2023-01-01

jk9hmnmh2#

此答案涉及包含javascript以触发menubutton的事件on press。
应遵循的步骤：
1.按照问题中提到的那样设计所需的overflow/side popup，并在默认情况下隐藏它。
1.单击菜单按钮时，通过取消隐藏组件来显示overflow/side popup。

赞(0）回复(0）举报 2023-01-01