高山模态不从隐藏的移动菜单中打开

Question

我正在设计一个布局，您可以在其中单击主菜单中的 link，它会打开一个使用 Alpine.js 的模态 window。在桌面视图中，这工作正常。

但我还有第二个导航，它只能在移动视图中查看，您必须单击汉堡图标才能打开它。 link 移动菜单中的相同模式不起作用。

下面是 HTML 的基本版本。我还创建了一个 Codepen 来说明问题。启动模态的 link 是 assessment。

在桌面视图中，单击评估打开模式。从移动菜单执行相同操作只会再次关闭菜单（这是有意为之，因为菜单 link 中的每个 link 指向页面下方的锚点）。

我需要做什么才能让模式也从移动视图启动？

<div
  id="page"
  x-data="{ 'isDialogOpen': false }"
  @keydown.escape="isDialogOpen = false"
>
  <header>
    <div>
      <nav>
        <a href="#page">home</a>
        <a href="#section-about">about</a>
        <a href="#assessment" @click="isDialogOpen = true">assessment</a>
        <a href="#section-overview">overview</a>
      </nav>

      <nav
        x-data="{ isOpen: false, isDialogOpen: false }"
        @keydown.escape="isOpen = false"
        :class="{ 'fixed left-0 w-full' : isOpen , 'absolute' : !isOpen}"
      >
        <button
          @click="isOpen = !isOpen"
          type="button"
          :class="{ 'transition transform-180 ml-8': isOpen }"
        >
          <svg>
            <path x-show="isOpen"/>
            <path x-show="!isOpen"/>
          </svg>
        </button>

        <div
          :class="{ 'block': isOpen, 'hidden': !isOpen }"
          @click.away="isOpen = false"
          x-show.transition="true"
        >
          <ul>
            <li>
              <a
                href="#page"
                @click="isOpen = false"
              >
                home
              </a>
            </li>
            <li>
              <a
                href="#section-about"
                @click="isOpen = false"
              >
                about
              </a>
            </li>
            <li>
              <a
                href="#assessment"
                @click="isDialogOpen = true, isOpen = false"
              >
                assessment
              </a>
            </li>
            <li>
              <a
                href="#section-overview"
                @click="isOpen = false"
              >
                overview
              </a>
            </li>
          </ul>
        </div>
      </nav>

    </div>

  </header>
  
  <div
    id="assessment"
    x-show="isDialogOpen"
    :class="{ 'absolute inset-0 z-40 flex items-start justify-center': isDialogOpen }"
  >
    <div
       x-show="isDialogOpen"
       @click.away="isDialogOpen = false"
    >
      <div>
        <h2>Heading</h2>
        <button type="button" @click="isDialogOpen = false">✖</button>
      </div>
      <div>
        <p>Content</p>
      </div>
    </div>
  </div>
  
</div>

Answer 1

您的问题主要是 div 和移动导航是两个不同的 AlpineJs 组件。移动导航有它自己的 x-data 实例，因此它有自己的范围。当您在移动导航组件上设置 isDialogOpen 时，模式不会发生任何事情，因为它不在该组件内。它在父组件中。

这里的解决方案是将您的手机 isOpen 添加到主要组件实例并删除移动导航的 x-data：

<div x-data="{
    isMobileNavOpen: false,
    isDialogOpen: false,
}">
    <nav id="main">
        ...
        <span @click="isDialogOpen = true">Assessment</span>
    </nav>

    <nav id="mobile">
        <button @click="isMobileNavOpen = !isMobileNavOpen"></button>

        <div x-show="isMobileNavOpen">
            ...
            <span @click="isDialogOpen = true">Assessment</span>
        </div>
    </nav>

    <div 
    id="modal"
    x-show="isDialogOpen"></div>
</div>

您可能会发现使用 AlpineJs Dev Tools 很有帮助。当这种事情发生时，对我有很大帮助。

此外，如果在某些时候您需要能够在组件之间进行通信，请查看 Kevin Batdorf 的 Alpine Magic Helpers 包

高山模态不从隐藏的移动菜单中打开

Alpine modal doesn't open from within hidden mobile menu

javascript

tailwind-css

alpine.js