使用 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 的页面缓存事件。当用户点击按钮时，它会打开或关闭下拉菜单，并在文档中添加或删除关闭菜单的事件侦听器。当用户选择一个选项时，它会记录选项并关闭菜单。当页面被缓存时，它会自动关闭菜单。