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

我正在玩HTMX，在阅读文档之后，我对如何从标题中激活下拉菜单感到有点困惑

这就是我目前所拥有的，这个按钮应该包含

HMTX

属性，以打开

aka下拉列表，id和名称为

response

（命名仅用于测试目的）

如图所示，这个div将下拉列表包装在一起

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

以下是所有内容，我使用的模型取自TailwindCSS（HTMX属性除外）：

文章

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

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

---

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

HTMX使用以下模式：

事件（例如按钮单击）

对服务器的http请求

来自服务器的http响应（包含html片段）

片段被应用到DOM

单击按钮后，需要接收http响应。也许我是瞎子，但我认为你的代码中缺少了这一点。

什么是

hx get=“#…”“

AFAIK你需要使用一个返回片段的URL。是否可以在

hx get

中寻址html元素？这对我来说是新鲜事。

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

          <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-width="2"
                          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>