各位前端开发的朋友，大家好，今天我要和大家分享一个很酷的东西，这可以帮你们用更少的JS代码写出交互元素。

• 我将使用 Tailwind CSS v4 进行样式设计工作。
• 我将在 Scribbler.live 上首先创建代码片段，这是一个非常棒的平台，允许你运行 JavaScript 笔记本、在线编译器和编辑工具，无需手动设置。
• 另外，我提供了一个链接，里面包含所有代码示例，你可以打开这个链接，亲自运行代码查看结果。
• 我会用 Scribbler.live 的 scrib.show，这和 console.log 一样。

好了，咱们开始吧！目录

• 如何不用JS创建交互元素？
• 通知组件
• 下拉列表组件
• 弹出框组件
• 侧边栏导航组件
• 结尾

由于源文本和初始翻译均为空，因此没有内容可以进行分析和反馈。请提供包含内容的源文本以便进行适当的分析和反馈。如何在没有使用 JavaScript 的情况下创建互动元素？

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

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

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

    <div class="[&_.warning]:bg-warning-600">
       <p id="warning"></p>
    </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">此通知可以互动关闭，无需使用JavaScript</h2>
          <label for="close-btn" class="text-red-400 text-xl cursor-pointer">
            关闭
            <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">
            下拉列表
            <input id="dropdown-btn" type="checkbox" class="appearance-none w-0 h-0 hidden" />
          </label>
        </div>
        <ul class="mt-5 space-y-2">
          <li>第1项内容</li>
          <li>第2项内容</li>
          <li>第3项内容</li>
          <li>第4项内容</li>
          <li>第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">打开模态对话框</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">关闭</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>无需 JavaScript 的模态对话框</h2>
              <p>此模态对话框使用 Tailwind CSS 的 has 选择器创建，完全不需要 JavaScript 来实现交互。</p>
            </div>
          </div>
          <div class="hidden fixed z-10 inset-0 bg-slate-900/50 模态背景"></div>
    </div>

点击全屏模式, 点击退出全屏

• 这个稍微有点复杂，这里我们结合了父元素选择器和has选择器的功能来检查父元素是否包含名为"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>条目 1</li>
                <li>条目 2</li>
                <li>条目 3</li>
                <li>条目 4</li>
                <li>条目 5</li>
                <li>条目 6</li>
                <li>条目 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 上的所有示例，然后自己运行看看每个的结果。

app.scribbler.live

没有 JavaScript 的情况下处理交互性任务非常困难，对于操作复杂的元素，我们应该使用 JavaScript。对于简单的元素，如下拉菜单和通知，我们可以不用 JavaScript。

这篇帖子就说这么多吧，如果文章还有需要改进的地方，希望你能告诉我。也来看看Scribbler.live网站吧。

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
电子邮件 - shubhmtiwri00@gmail.com

你可以在下面的链接里支持我一些，非常感谢👇👇https://www.buymeacoffee.com/waaduheck

也来看看这些帖子。

## 带 CVA 和 Tailwind 的按钮组件 Shubham Tiwari ・ 2024年 2月 12日 #nextjs #react #web开发 #typescript

08:22 ## 微前端 - React | Solid | Vue Shubham Tiwari · 2024年1月9日 #指南 #前端开发 #新手 #学习之路

15:48 ## Codium | 开发者的 AI 助手——Codium Shubham Tiwari ・ 2024 年 1 月 4 日 #vscode #学习 #教程 #新手

05:25 ## Zustand - 初学者指南 Shubham Tiwari ・ 2023年11月21日 #webdev #教程 #React #JavaScript