如何在不使用 JavaScript 的情况下构建交互式网页

大家好，我的前端开发人员朋友们，今天我将与你们讨论一件很棒的事情，我们可以帮助您编写更少的 JavaScript 代码来创建交互元素。

我将使用 tailwind css v4 进行样式设置
我将首先在Scribbler.live上创建我的代码片段，这是一个很棒的平台，允许您运行 JavaScript Notebook、在线编译器和编辑器，而无需手动设置。
此外，我还附上了包含所有代码示例的代码片段链接，以便您可以打开该片段并自行运行以查看结果。
我将使用scrib.showscribbler.live，它相当于console.log

让我们深入了解...
目录

如何在不使用 JS 的情况下创建交互元素？
通知组件
下拉组件
模态组件
侧边栏导航组件
结论

如何在不使用 JS 的情况下创建交互元素？

我们将使用一些目前浏览器支持良好的新 CSS 选择器。创造性地使用这些选择器可以帮助创建许多交互式元素，例如模态框、下拉菜单、弹出窗口、侧边栏导航等等。

has() - 它允许我们检查子元素的状态并对父元素或子元素本身进行样式设置
[&] - 父选择器允许我们使用类、ID、数据属性等选择元素或元素状态，并设置其自身或子元素的样式。
句法：

<div class="has-[h2]:bg-slate-900>
   <h2 id="note"></h2>
</div>

<div class="[&_.warning]:bg-warning-600>
   <p id="warning"></h2>
</div>

通知组件

<div class="!p-1 rounded-xl bg-white flex justify-between items-center gap-x-5 has-checked:hidden mb-14">
      <h2 class="!text-slate-900">This notification is interactive and could be closed without Javascript</h2>
      <label for="close-btn" class="text-red-400 text-xl cursor-pointer">
        X
        <input id="close-btn" type="checkbox" class="appearance-none w-0 h-0 hidden" />
      </label>
</div>

这是一个简单的逻辑，这里我们检查父元素，如果它有一个处于选中状态的输入框，则隐藏整个元素。点击“X”将选中输入框并隐藏元素，就像通知元素一样。

下拉组件

 <div class="!p-2 rounded-xl bg-white h-12 overflow-hidden has-checked:h-fit has-checked:overflow-visible w-fit mb-14">
    <div class="flex justify-between items-center gap-x-5">
      <label for="dropdown-btn" class="text-blue-400 text-xl cursor-pointer">
        Dropdown
        <input id="dropdown-btn" type="checkbox" class="appearance-none w-0 h-0 hidden" />
      </label>
    </div>
    <ul class="mt-5 space-y-2">
      <li>Content 1</li>
      <li>Content 2</li>
      <li>Content 3</li>
      <li>Content 4</li>
      <li>Content 5</li>
    </ul>
</div>

在下拉组件中，我们会设置一个初始高度来显示下拉标题。当我们勾选输入框时，它会增加显示下拉内容的父元素的高度。再次点击它将取消勾选输入框并隐藏内容。

模态组件

<div class="[&:has(.modal-btn:checked)_.modal-content]:!block [&:has(.modal-btn:checked)_.modal-backdrop]:!block ">
      <div class="flex justify-between items-center gap-x-5">
          <label for="modal-btn" class="text-blue-400 text-xl cursor-pointer">
            <span class="right-arrow">Open modal</span>
            <input id="modal-btn" type="checkbox" class="appearance-none w-0 h-0 hidden modal-btn" />
          </label>
      </div>
      <div class="hidden fixed z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 modal-content bg-white w-1/2 h-40 rounded-xl">
         <div class="absolute right-3 top-3 flex justify-between items-center gap-x-5">
          <label for="modal-btn" class="text-blue-400 text-xl cursor-pointer">
            <span class="text-red-500">X</span>
            <input id="modal-btn" type="checkbox" class="appearance-none w-0 h-0 hidden" />
          </label>
        </div>
        <div class="p-3 space-y-3">
          <h2>Modal without javascript</h2>
          <p>This modal is created with tailwind css has selector and no javascript is used for the interactivity</p>
        </div>
      </div>
      <div class="hidden fixed z-10 inset-0 bg-slate-900/50 modal-backdrop"></div>
</div>

这个有点棘手，这里我们结合父选择器和选择器来检查父元素是否有一个类名为“modal-btn”的输入，如果被选中，则显示类名为“modal-content”的内容。
在模态框内容中，我们有另一个具有相同类名的输入复选框，单击它将取消选中输入并关闭模态框。
当模态框可见时，我们还有一个覆盖整个屏幕的背景元素，它也使用与模态框相同的方式显示。
类名细分：[&:has(.modal-btn:checked)_.modal-content]
- [&:has(.modal-btn:checked)] - 此部分用于检查元素是否具有类名 modal-btn 且处于选中状态的输入
- _.modal-content - 这里下划线（_）检查嵌套级别的元素，它使用“.modal-content”点符号检查 modal-content 类名。

侧边栏导航组件

   <div class="fixed top-5 left-0">
      <div class="flex gap-x-5 transition-all duration-200 ease-in -translate-x-24 has-checked:translate-x-4 w-fit has-checked:[&_.left-arrow]:block has-checked:[&_.right-arrow]:hidden">
        <div class="mt-5 space-y-2 bg-slate-100 p-3 rounded-xl">
          <ul class="space-y-5 max-h-60 overflow-auto">
            <li>Content 1</li>
            <li>Content 2</li>
            <li>Content 3</li>
            <li>Content 4</li>
            <li>Content 5</li>
            <li>Content 6</li>
            <li>Content 7</li>
          </ul>
        </div>
        <div class="absolute -right-10 flex justify-between items-center gap-x-5">
          <label for="sidebar-btn" class="text-blue-400 text-xl cursor-pointer">
            <span class="right-arrow text-xl">&#x2192;</span>
            <span class="left-arrow text-xl hidden">&#x2190;</span>
            <input id="sidebar-btn" type="checkbox" class="appearance-none w-0 h-0 hidden" />
          </label>
        </div>
      </div>
</div>

这个例子也很简单，我们设置了translate x属性为负值，使其从屏幕左侧移出。当我们点击向右的箭头图标时，它会检查输入，并添加正的translate x值，使其在屏幕上可见。
has-checked:[&_.left-arrow]:block has-checked:[&_.right-arrow]:hidden- 这些类只是根据侧边栏的可见性隐藏和显示左/右箭头。

查看 scribbler.live 上的所有示例，并亲自运行以查看上述每个示例的输出