stimulus 和 turbo js 写一个下拉列表

以下是用 Stimulus 和 Turbo.js 写的一个简单的下拉列表：

HTML 代码：

<div data-controller="dropdown">
  <button type="button" data-action="click->dropdown#toggle">
    Select an option
    <span data-dropdown-icon>▾</span>
  </button>
  <ul data-dropdown-menu>
    <li><a href="#" data-action="click->dropdown#selectOption" data-option="option1">Option 1</a></li>
    <li><a href="#" data-action="click->dropdown#selectOption" data-option="option2">Option 2</a></li>
    <li><a href="#" data-action="click->dropdown#selectOption" data-option="option3">Option 3</a></li>
  </ul>
</div>

JavaScript 代码：

import { Controller } from "stimulus"
import { Turbo } from "@hotwired/turbo-rails"

export default class extends Controller {
  static targets = [ "icon", "menu" ]
  static values = { isOpen: Boolean }

  connect() {
    this.isOpenValue = false
    this.closeMenu = this.closeMenu.bind(this)
    document.addEventListener("turbo:before-cache", this.closeMenu)
  }

  disconnect() {
    document.removeEventListener("turbo:before-cache", this.closeMenu)
  }

  toggle() {
    this.isOpenValue = !this.isOpenValue
    if (this.isOpenValue) {
      this.menuTarget.classList.add("open")
      this.iconTarget.innerHTML = "▴"
      document.addEventListener("click", this.closeMenu)
    } else {
      this.menuTarget.classList.remove("open")
      this.iconTarget.innerHTML = "▾"
      document.removeEventListener("click", this.closeMenu)
    }
  }

  selectOption(event) {
    event.preventDefault()
    const option = event.target.dataset.option
    console.log(`Selected option: ${option}`)
    this.closeMenu()
  }

  closeMenu() {
    this.isOpenValue = false
    this.menuTarget.classList.remove("open")
    this.iconTarget.innerHTML = "▾"
    document.removeEventListener("click", this.closeMenu)
  }
}

CSS 代码：

[data-dropdown-menu] {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: white;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
}

[data-dropdown-menu].open {
  display: block;
}

[data-dropdown-menu] li {
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-dropdown-menu] a {
  display: block;
  padding: 5px;
  text-decoration: none;
  color: #333;
}

[data-dropdown-menu] a:hover {
  background-color: #f5f5f5;
}

[data-dropdown-icon] {
  margin-left: 5px;
}

这个下拉列表控制器使用了 Stimulus 的值和目标，以及 Turbo.js 的页面缓存事件。当用户点击按钮时，它会打开或关闭下拉菜单，并在文档中添加或删除关闭菜单的事件侦听器。当用户选择一个选项时，它会记录选项并关闭菜单。当页面被缓存时，它会自动关闭菜单。