Fullcalendar列表视图点击事件标题切换description显示仅部分生效

问题根源 #

你的代码在eventDidMount钩子中执行全局DOM操作，而这个钩子会每个事件挂载时触发一次，导致两个关键问题：

1. 重复执行$('.item-content').hide()，每次新事件加载都会把所有描述重新隐藏，打乱之前的显示状态。
2. 重复给.item-title绑定点击事件，奇数行元素会被绑定奇数次点击（触发一次toggle生效），偶数行被绑定偶数次（触发两次toggle等于没变化），最终表现为仅奇数行生效。

修复代码 #

把初始化和事件绑定逻辑移到datesRender钩子（视图渲染完成后仅触发一次），同时用事件委托确保动态元素也能响应：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 你的日历配置（视图、事件源等）
    datesRender: function(info) {
      // 仅初始化隐藏所有描述一次
      $('.item-content').hide();
      // 事件委托绑定点击，父容器代理所有子元素的点击事件
      $('#calendar').on('click', '.item-title', function() {
        $(this).next('.item-content').toggle();
      });
    },
    eventDidMount: function(info) {
      // 这里只处理当前事件的自定义渲染，比如插入描述内容
      // 示例：
      // info.el.querySelector('.item-content').textContent = info.event.extendedProps.description;
    }
  });

  calendar.render();
});

额外注意 #

确认你的事件DOM结构正确，确保.item-title的直接下一个兄弟元素是.item-content，比如：

<div class="fc-list-event">
  <div class="item-title">事件标题</div>
  <div class="item-content">这里是描述内容</div>
</div>

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