classlist.toggle()在移动safari上不能正常工作

classList.toggle() 方法在移动 Safari 浏览器上可能无法正常工作的原因通常与浏览器的兼容性问题有关。classList.toggle() 是一个相对较新的 DOM API，虽然大多数现代浏览器都支持它，但在某些旧版本的移动 Safari 中可能存在兼容性问题。

基础概念

classList.toggle() 是一个用于在元素的类列表中添加或移除类的方法。如果指定的类已经存在于元素的类列表中，则该方法会将其移除；如果不存在，则会添加该类。

可能的原因

浏览器版本过旧：移动 Safari 的某些旧版本可能不完全支持 classList.toggle() 方法。
JavaScript 异常：在执行 classList.toggle() 时，可能会抛出异常，例如由于 DOM 元素未正确加载或其他 JavaScript 错误。

解决方案

1. 检查浏览器版本

确保用户使用的移动 Safari 版本是最新的。可以通过以下方式检测浏览器版本并给出提示：

if (navigator.userAgent.match(/Version\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari/)) {
    var majorVersion = parseInt(RegExp.$1, 10);
    if (majorVersion < 14) {
        alert('请升级您的 Safari 浏览器以获得更好的体验。');
    }
}

2. 使用 Polyfill

如果需要支持旧版本的移动 Safari，可以使用 classList.toggle() 的 Polyfill：

if (!('classList' in document.documentElement)) {
    Object.defineProperty(Element.prototype, 'classList', {
        get: function() {
            var self = this;
            function update(fn) {
                return function(value) {
                    var classes = self.className.split(/\s+/g),
                        index = classes.indexOf(value);

                    fn(classes, index, value);
                    self.className = classes.join(' ');
                };
            }

            return {
                add: update(function(classes, index, value) {
                    if (!~index) classes.push(value);
                }),

                contains: function(value) {
                    return !!~self.className.split(/\s+/g).indexOf(value);
                },

                item: function(i) {
                    return self.className.split(/\s+/g)[i] || null;
                },

                remove: update(function(classes, index) {
                    if (~index) classes.splice(index, 1);
                }),

                toggle: update(function(classes, index, value) {
                    if (~index) { classes.splice(index, 1); } else { classes.push(value); }
                })
            };
        }
    });
}

3. 使用 jQuery 等库

如果项目中已经使用了 jQuery 或其他类似的库，可以利用这些库提供的方法来替代 classList.toggle()：

// 使用 jQuery
$('#elementId').toggleClass('className');

// 使用原生 JavaScript 的 classList API
document.getElementById('elementId').classList.toggle('className');

应用场景

classList.toggle() 常用于需要在用户交互（如点击事件）中动态切换元素样式的场景，例如：

<button id="toggleButton">Toggle Class</button>
<div id="targetElement" class="initial-class">Content</div>

<script>
document.getElementById('toggleButton').addEventListener('click', function() {
    document.getElementById('targetElement').classList.toggle('active-class');
});
</script>

在这个例子中，每次点击按钮时，targetElement 的 active-class 类会被添加或移除，从而改变元素的样式。

通过以上方法，可以有效解决 classList.toggle() 在移动 Safari 上无法正常工作的问题。