1

我在玩 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-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>

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

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

HTMX 文档可以在这里找到

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

4

1 回答 1

1

HTMX 使用这种模式:

  1. 事件(例如按钮点击)
  2. 对服务器的http请求
  3. 来自服务器的 http 响应(包含一个 html 片段)
  4. 片段被应用到 DOM。

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

于 2021-05-29T07:49:19.347 回答