取消选中复选框时，html 按钮复选框在 iOS 14 上不会触发更改事件

Question

我有一个网站暂时运行在droneard.de上，其中包括一个CSS菜单(取自https://codepen.io/omar_anwari_/pen/WdBgBg)。此解决方案使用不可见的复选框。现在，我触发了一个JS函数来更改内容包装器的不透明度，通过使用按钮上的onchange事件来提高文本的可读性。在JS函数中，我将一个变量设置为当前不透明度，并使用它将不透明度设置/动画化为0.6(如果为1(和1(如果为0.6(。这在所有现代浏览器上都很好，但在iOS 14.8上的Safari和macOS Big Sur上，我遇到了一个问题，如果我勾选复选框/打开菜单，它会完全失去容量，但它不会将其设置回不透明状态：关闭菜单/取消勾选选复选框时为1。我不认为问题出在JavaScript上，Safari有没有可能不认为解锁是一个"问题"；onchange"；事件

JavaScript:

function menubackground () {
var opa_city__var_from_home = $('.fadeinobject').css('opacity');
if (opa_city__var_from_home == '0.6') {
$(".fadeinobject").animate({"opacity": "1"}, 230);
}
else {
$(".fadeinobject").animate({"opacity": "0.6"}, 230);
}
}

HTML:

<input type="checkbox" onchange="menubackground()" />

Answer 1

不透明度以浮点数字的形式存储在内部，这可能会导致错误。因此，在进行比较之前，请先用一个小数位格式化数字。

function menubackground () {
var opa_city__var_from_home = $('.fadeinobject').css('opacity');
if (parseFloat(opa_city__var_from_home).toFixed(1) == '0.6') {
$(".fadeinobject").animate({"opacity": "1"}, 230);
}
else {
$(".fadeinobject").animate({"opacity": "0.6"}, 230);
}
}