Laravel项目中带复选框的下拉列表无法点击展开求助

我在Laravel项目中做文件的标签筛选，标签与文件通过中间表关联，编写了带复选框的下拉列表代码，但目前下拉列表无法点击展开——开发者工具中能看到UL元素，但点击后没有反应。

原代码 #

HTML代码

<div wire:model="tag_id" wire:change="filter" id="list1" class="dropdown-check-list" tabindex="100">
    <span class="anchor">select tag </span>
    <ul class="items">
        @foreach ($categories as $category)
            <li> <input wire:model="tag_id" wire:change="filter" type="checkbox" value="{{$category->id}}"/>{{ $category->name}}</li>
        @endforeach
    <ul> <!-- 标签闭合错误 -->
</div>

CSS代码

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}

.dropdown-check-list.visible .items {
  display: block;
}

JavaScript代码

var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
  if (checkList.classList.contains('visible'))
    checkList.classList.remove('visible');
  else
    checkList.classList.add('visible');
}

问题原因及修复方案 #

1. HTML标签闭合错误
   原代码末尾的<ul>应为</ul>，错误的闭合会导致DOM结构混乱，直接影响下拉列表的渲染与交互逻辑。

2. Livewire绑定干扰

   • 不要在父div上绑定wire:model和wire:change，复选框是多选场景，需用数组类型的wire:model（如tag_ids），且仅绑定在input元素上。
   • 给下拉容器添加wire:ignore，避免Livewire重新渲染时破坏DOM结构与事件绑定。

3. JS事件绑定时机问题
   原JS代码可能在DOM未完全加载时执行，导致无法找到目标元素。改用DOMContentLoaded确保事件在DOM就绪后绑定，同时添加点击外部关闭下拉的逻辑。

修改后的代码 #

HTML代码

<div id="list1" class="dropdown-check-list" tabindex="100" wire:ignore>
    <span class="anchor">选择标签</span>
    <ul class="items">
        @foreach ($categories as $category)
            <li>
                <input wire:model="tag_ids" type="checkbox" value="{{ $category->id }}" />
                {{ $category->name }}
            </li>
        @endforeach
    </ul>
</div>

JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
    const checkList = document.getElementById('list1');
    const anchor = checkList.querySelector('.anchor');
    
    anchor.addEventListener('click', function(evt) {
        evt.stopPropagation(); // 防止事件冒泡被Livewire拦截
        checkList.classList.toggle('visible');
    });

    // 点击下拉外部自动关闭
    document.addEventListener('click', function(evt) {
        if (!checkList.contains(evt.target)) {
            checkList.classList.remove('visible');
        }
    });
});

Livewire组件处理

在组件类中定义数组属性并修改筛选逻辑：

public $tag_ids = [];

public function filter()
{
    $this->files = \App\Models\File::when(count($this->tag_ids) > 0, function($query) {
        return $query->whereHas('tags', function($q) {
            $q->whereIn('tags.id', $this->tag_ids);
        });
    })->get();
}

内容的提问来源于stack exchange，提问作者Delano van londen