Bootstrap/jQuery单选按钮在Firefox/Safari中失效问题求助

嘿，看你遇到的这个跨浏览器兼容问题，我来帮你一步步拆解解决——先从报错信息入手，这两个错误其实是问题的根源，搞定它们之后，显示/隐藏的功能应该就能正常工作了。

1. 先搞定ReferenceError: jQuery is not defined错误 #

这个错误是核心：Bootstrap（尤其是Bootstrap 4及以下版本）依赖jQuery，而你的togglebuttons.js又依赖Bootstrap，如果jQuery没在它们之前加载，所有依赖它的代码都会直接崩掉。

在WordPress里，不要直接手动写<script>标签引入jQuery，要用官方的脚本加载方法来确保顺序正确：

• 打开主题的functions.php文件，添加这段代码：

function enqueue_custom_scripts() {
    // 加载WordPress自带的jQuery（避免版本冲突）
    wp_enqueue_script('jquery');
    
    // 加载Bootstrap JS，明确依赖jQuery
    wp_enqueue_script(
        'bootstrap-js',
        get_template_directory_uri() . '/path/to/bootstrap.min.js', // 替换成你Bootstrap文件的实际路径
        array('jquery'), // 声明依赖jQuery
        '4.6.0', // 替换成你的Bootstrap版本号
        true // 放在页面底部加载，优化性能
    );
    
    // 加载你的togglebuttons.js，依赖jQuery和Bootstrap
    wp_enqueue_script(
        'togglebuttons-js',
        get_template_directory_uri() . '/path/to/togglebuttons.js', // 替换成你的脚本路径
        array('jquery', 'bootstrap-js'), // 声明依赖
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

• 另外，WordPress默认的jQuery是兼容模式，不能直接用$，要把togglebuttons.js里的代码包在这个结构里：

jQuery(document).ready(function($) {
    // 把你原来的togglebuttons.js代码全放在这里面
    // 比如单选按钮的切换逻辑：
    $('input[name="your-radio-group-name"]').on('change', function() {
        // 你的显示/隐藏逻辑
        $('.toggle-content').hide();
        $('#' + $(this).val()).show();
    });
});

2. 解决默认内容全显示的问题 #

现在默认所有内容都显示，是因为JS加载失败后，没有执行隐藏逻辑。我们可以用CSS先默认隐藏内容，避免页面加载时的“闪烁”：

• 给所有需要切换的内容块加一个统一的类，比如.toggle-content
• 在你的自定义CSS里添加：

/* 默认隐藏所有切换内容 */
.toggle-content {
    display: none !important; /* 加!important确保优先级足够 */
}

/* 默认显示第一个需要展示的内容块 */
.toggle-content.active {
    display: block !important;
}

• 然后在HTML里给默认要显示的内容块加上active类，这样即使JS没加载，也只会显示默认项，不会全出来。

3. 修复Bootstrap的TypeError: t is undefined错误 #

这个错误通常是Bootstrap和jQuery版本不兼容导致的：

• 如果用的是Bootstrap 4.x：需要jQuery 1.9.1以上版本，同时还要加载Popper.js（Bootstrap 4的弹窗、下拉等组件依赖它）
• 如果用的是Bootstrap 5.x：它已经不依赖jQuery了，如果你还是想用jQuery，需要开启Bootstrap的jQuery兼容模式，或者直接把你的切换逻辑改成原生JS写法（更推荐）
• 检查你的Bootstrap版本，确保和jQuery版本匹配，比如Bootstrap 4.6.0兼容jQuery 3.6.0及以上版本。

4. 处理Safari（iPhone/iPad）的兼容性问题 #

Safari对某些JS事件和CSS属性的支持比较严格：

• 确保单选按钮的change事件绑定正确，不要用click事件（Safari里单选按钮的click事件可能触发时机不对）
• 检查CSS的display: none是否被Safari的默认样式覆盖，可以用更具体的选择器，比如body .toggle-content来提高优先级
• 确保你的JS代码是在DOM完全加载后执行的，也就是用jQuery(document).ready()或者原生的DOMContentLoaded事件，避免操作还没渲染的DOM元素。

按照这个步骤一步步来，先搞定jQuery的加载问题，再调整CSS默认隐藏，最后检查版本兼容，应该就能解决Chrome正常、Firefox和Safari失效的问题了。

内容的提问来源于stack exchange，提问作者Kristián Filo