Moodle中仅含单个选项的dropdown-menu转按钮实现问询

开发者阿泽

2026-7-31

解决方案

1. 给下拉菜单添加统一标识类

先给所有需要处理的.dropdown元素加一个统一类data-entry-dropdown，方便JS定位：

<div class="dropdown data-entry-dropdown">...</div>

2. 执行以下JavaScript代码

这段代码会自动处理所有目标下拉菜单，判断是否为单选项并替换：

document.addEventListener('DOMContentLoaded', function() {
    // 定位所有要处理的下拉菜单
    const dropdowns = document.querySelectorAll('.data-entry-dropdown');
    
    dropdowns.forEach(dropdown => {
        // 统计下拉菜单里的有效选项（非空的dropdown-item）
        const validItems = dropdown.querySelectorAll('.dropdown-item:not(:empty)');
        
        // 只有1个有效选项时进行替换
        if (validItems.length === 1) {
            const viewLink = validItems[0].querySelector('a');
            if (viewLink) {
                // 创建新的按钮式链接
                const actionButton = document.createElement('a');
                actionButton.className = 'btn btn-outline-primary';
                actionButton.href = viewLink.href;
                actionButton.role = 'button';
                actionButton.textContent = 'Mehr';
                
                // 继承原查看按钮的辅助属性
                const icon = viewLink.querySelector('i');
                actionButton.setAttribute('aria-label', icon.getAttribute('aria-label'));
                actionButton.setAttribute('title', icon.getAttribute('title'));
                
                // 替换原下拉菜单容器
                dropdown.parentNode.replaceChild(actionButton, dropdown);
            }
        }
    });
});