适配details/summary标签的过期活动自动移除脚本修改咨询

云原生阿岚

2026-9-23

问题原因

原来的脚本仅隐藏了最内层带.eventItem类的活动内容，但外层包裹单个活动的<details>标签、以及按天分组的上层<details>标签仍会正常显示，所以视觉上看起来过期活动没有被移除。

解决方法

将原有脚本替换为以下代码即可：

const htmlDateSettings = {
    "date-format": "d-m-y",
    "date-devider": "-"
}

removeExpiredEvents(); // 自动调用函数

function removeExpiredEvents() {
    let eventItems = Array.from(document.querySelectorAll('.eventItem'));
    let df = htmlDateSettings['date-format'];
    let dd = htmlDateSettings['date-devider'];
    let msInOneDay = 1000 * 60 * 60 * 24;
    let today = new Date().getTime();

    for(let eventItem of eventItems) {
        let date = eventItem.getAttribute('date');
        if(!date) continue;

        date = date.split(dd);
        let dateFormat = df.split(dd);

        let filteredDate = `${date[dateFormat.indexOf('m')]}/${date[dateFormat.indexOf('d')]}/${date[dateFormat.indexOf('y')]}`
        filteredDate = new Date(filteredDate).getTime();
        filteredDate = filteredDate + msInOneDay; // 活动日期加1天，次日才隐藏
    
        if(today > filteredDate) {
            // 隐藏活动本身的同时，向上找到包裹该活动的details标签一起隐藏
            let activityDetails = eventItem.closest('details');
            if(activityDetails) activityDetails.style.display = 'none';
        }
    }

    // 额外处理：如果某一天所有活动都过期了，把该天的外层details也隐藏
    let dayDetails = Array.from(document.querySelectorAll('summary#day-and-date')).map(s => s.closest('details'));
    for(let day of dayDetails) {
        let hasVisibleActivity = day.querySelectorAll('details:not([style*="display: none"])').length > 0;
        if(!hasVisibleActivity) day.style.display = 'none';
    }
}