如何使用 HTMX 打开和关闭标题中的下拉菜单？

Posted 2023-05-07

【中文标题】如何使用 HTMX 打开和关闭标题中的下拉菜单？

【英文标题】：How to use HTMX to open and close a dropdown menu in a header?

【发布时间】：2021-08-15 01:02:35

【问题描述】：

我正在玩 HTMX，在阅读了文档后，我对如何从我的标题中创建 <button> 激活下拉列表 <div> 有点困惑。

这是我目前所拥有的，此按钮应包含 HMTX 属性以打开 <div> aka 下拉菜单，其 ID 和名称为 response（命名仅用于测试目的）。

              <button
                type="button"
                aria-expanded="false"
                hx-get="#response"
                hx-target="#response"
                hx-indicator=".htmx-indicator"
              >

如此处所示，此 div 将下拉列表包装在一起。

              <div
                id="response"
                name="response"
              >

这里是所有东西，我使用的模型取自 TailwindCSS（除了 HTMX 属性）：

          <nav class="hidden md:flex space-x-10">
            <div class="relative">
              <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
              <button
                type="button"
                class="
                  text-gray-500
                  group
                  bg-white
                  rounded-md
                  inline-flex
                  items-center
                  text-base
                  font-medium
                  hover:text-gray-900
                  focus:outline-none
                  focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
                "
                aria-expanded="false"
                hx-get="#response"
                hx-target="#response"
                hx-indicator=".htmx-indicator"
              >
                <span>Articles</span>
                <!--
                Heroicon name: solid/chevron-down

                Item active: "text-gray-600", Item inactive: "text-gray-400"
                -->
                <svg
                  class="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                    clip-rule="evenodd"
                  />
                </svg>
              </button>

              <!--
                'Solutions' flyout menu, show/hide based on flyout menu state.

                Entering: "transition ease-out duration-200"
                From: "opacity-0 translate-y-1"
                To: "opacity-100 translate-y-0"
                Leaving: "transition ease-in duration-150"
                From: "opacity-100 translate-y-0"
                To: "opacity-0 translate-y-1"
            -->
              <div
                id="response"
                name="response"
                class="
                  absolute
                  z-10
                  -ml-4
                  mt-3
                  transform
                  px-2
                  w-screen
                  max-w-md
                  sm:px-0
                  lg:ml-0
                  lg:left-1/2
                  lg:-translate-x-1/2
                "
              >
                <div
                  class="
                    rounded-lg
                    shadow-lg
                    ring-1 ring-black ring-opacity-5
                    overflow-hidden
                  "
                >
                  <div
                    class="
                      relative
                      grid
                      gap-6
                      bg-white
                      px-5
                      py-6
                      sm:gap-8
                      sm:p-8
                    "
                  >
                    <a
                      href="#"
                      class="
                        -m-3
                        p-3
                        flex
                        items-start
                        rounded-lg
                        hover:bg-gray-50
                      "
                    >
                      <!-- Heroicon name: outline/chart-bar -->
                      <svg
                        class="flex-shrink-0 h-6 w-6 text-indigo-600"
                        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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                        />
                      </svg>
                      <div class="ml-4">
                        <p class="text-base font-medium text-gray-900">
                          Analytics
                        </p>
                        <p class="mt-1 text-sm text-gray-500">
                          Get a better understanding of where your traffic is
                          coming from.
                        </p>
                      </div>
                    </a>
                  </div>
                 </div>
                </nav>

到目前为止，在开发测试中，我的 NAV 栏中的每个下拉菜单都会在页面加载后立即打开。单击 NAV 标题后，没有适当的事件来声明下拉菜单的出现时间。

如何修复和使用 HTMX 来解决此问题？

HTMX docs can be found here

编辑：请注意，我已经为 HTMX 添加了 CDN 脚本，并且使用属性确认脚本正在运行，我只是不明白如何解决上述问题。

【问题讨论】：

什么是hx-get="#..." AFAIK，您需要使用返回片段的 URL。是否可以在hx-get 中处理 html 元素？这对我来说是新的。

【参考方案1】：

HTMX 使用这种模式：

事件（例如按钮点击） 对服务器的http请求 来自服务器的http响应（包含一个html片段） 片段被应用到 DOM。

点击按钮后，您需要收到 http 响应。也许我是盲人，但我认为您的代码中缺少这一点。