Laravel框架下用JS实现待办列表点击仅单条显示对应内容问题求助

原有代码问题 #

• 循环渲染时给所有内容块设置了相同id，浏览器原生getElementById只会返回匹配到的最后一个元素
• 循环内重复定义myFunction函数，后定义的会覆盖先定义的，所有点击事件都只会操作最后一个待办的内容块
• 没有全局隐藏其他内容块的逻辑，导致点击多个标题后多个内容同时展示

修改步骤 #

1. 新增全局CSS（默认隐藏所有待办内容） #

.card-body {
  display: none;
  margin: 4px 0 16px 24px;
}

2. 修改Blade模板代码 #

移除循环内重复的script块，给每个待办项绑定唯一标识：

<div class="container-fluid">
    <h1>Painted List <a href="/create" class="text-success"><i class="fa fa-plus"></i></a></h1>
    <ul>
        @if(count($paints) > 0)
            @foreach($paints as $paint)
                <!-- 点击事件传入当前待办的唯一ID -->
                <li onclick="toggleContent({{ $paint->id }})">
                    <span><i class="fa fa-trash"></i></span> {{ $paint->title }}
                </li>
                <!-- 用data属性绑定唯一标识，移除重复的id属性 -->
                <div class="card-body" data-content-id="{{ $paint->id }}">
                    <p class="content">{{ $paint->content }}</p>
                </div>
            @endforeach
        @else
            <li><span><i class="fa fa-trash"></i></span> No Paint yet!</li>
        @endif
    </ul>
</div>

3. 新增全局JS代码（放在页面底部公共脚本区域，不要放在循环内） #

如果需要点击标题仅展开当前内容，其余全部隐藏：

function toggleContent(currentId) {
    // 先隐藏所有内容块
    const allContentBlocks = document.querySelectorAll('.card-body');
    allContentBlocks.forEach(block => {
        block.style.display = 'none';
    });
    // 展示当前点击对应内容块
    const targetBlock = document.querySelector(`.card-body[data-content-id="${currentId}"]`);
    if (targetBlock) {
        targetBlock.style.display = 'block';
    }
}

如果需要点击已展开的标题可以收起内容，调整JS逻辑如下：

function toggleContent(currentId) {
    const allContentBlocks = document.querySelectorAll('.card-body');
    const targetBlock = document.querySelector(`.card-body[data-content-id="${currentId}"]`);
    // 记录当前内容块是否已展开
    const isAlreadyOpen = targetBlock && targetBlock.style.display === 'block';
    
    // 先隐藏所有内容块
    allContentBlocks.forEach(block => {
        block.style.display = 'none';
    });
    
    // 如果之前未展开，现在展示；如果已展开，保持隐藏实现收起效果
    if (targetBlock && !isAlreadyOpen) {
        targetBlock.style.display = 'block';
    }
}

内容的提问来源于stack exchange，提问作者AfroDemoz