Javascript 物化可折叠手风琴不工作IOS 13

我的问题

我在一个正在使用的网站上工作

当我试图在safari中打开iphone 7 IOS 13.3.1上的可折叠手风琴时，它不起作用

但是，当我在其他浏览器（如firefox）上试用它时，效果很好

我在上找到的解决方案对我不起作用

我不知道如何解决我的问题

欢迎任何hep/提示

提前谢谢

我的代码

函数openForm{ document.getElementByIdmyForm.style.display=block； } 函数闭包形式{ document.getElementByIdmyForm.style.display=none； } document.addEventListener'DOMContentLoaded'，函数{ var elems=document.querySelectorAll.modal'； var实例=M.Modal.initelems； }; document.addEventListener'DOMContentLoaded'，函数{ var elems=document.querySelectorAll'.dropdown trigger'； //变量选项= var instances=M.Dropdown.initelems，{coverTrigger:false}； }; document.addEventListener'DOMContentLoaded'，函数{ var elems=document.queryselectoral'.sidenav'； var实例=M.Sidenav.initelems； }; $document.readyfunction{ $'.collable'.可折叠； } 输入：焦点{ 边框底部：1px实心1C9CDA！重要； 盒子阴影：0 1px 0 1C9CDA！重要； } label.active{ 颜色：1C9CDA！重要； } .标准颜色{ 背景色：1C9CDA！重要； } .标准颜色{ 颜色：1C9CDA！重要； } .侧导航{ z指数：1001！重要； } .导航{ 左侧填充：16px！重要； } 正文{字体系列：Arial，Helvetica，无衬线；} *{框大小：边框框；} html，正文{ 保证金：0； 身高：100%； } 地图{ 身高：100%； 宽度：100%； } .下拉内容{ 宽度：最大内容！重要； 高度：自动！重要； } /*用于打开联系人表单的按钮-固定在页面底部*/ .打开按钮{ 位置：绝对！重要； 底部：23px； 右：20px； 宽度：200px； } 表格{ 浮动：无； 明确：两者皆有； } /*弹出窗体-默认情况下隐藏*/ .表格弹出窗口{ 显示：无； 位置：固定； 底部：0； 右：15px； 边框：3倍实心F1F1； z指数：9； 页边距底部：0！重要； } /*将样式添加到表单容器*/ .表格弹出窗口{ 最大宽度：400px； 最小宽度：300px； 宽度：25%； } /*表格盒*/ .表格容器{ 填充：20px！重要； 背景色：白色； } .登录{ 显示：内联； 字体大小：30px； } .注册，.注册：已访问{ 光标：指针； 字体大小：24px； 文字装饰：下划线； 浮动：无！重要； 明确：两者皆有； } 表格(全文){ 背景色：白色； 宽度：100%； 身高：60%； 位置：绝对位置； 最高：20%； 左：20%； 不透明度：0.9； } 报名{ 字体大小：25px； 文本转换：大写； 高度：50px； 宽度：自动； 位置：绝对位置； 右：50%； 边界半径：10px； } .非用户{ 字体大小：24px； 颜色：7070； } .取消{ 字体大小：35px； 颜色：7070； } .注册\取消{ 字体大小：35px； 文字装饰：下划线； } 行链接{ 左边距：0； } .警惕{ 位置：相对位置； 宽度：100%； 填充：15px； 背景色：f44336； 颜色：白色； 文本对齐：居中； } .关闭{ 左边距：15px； 颜色：白色； 字体大小：粗体； 浮动：对； 字体大小：22px； 线高：20px； 光标：指针； 过渡：0.3s； } .closebtn:悬停{ 颜色：黑色； } 登录警告{ 排名：0； } /*带有gps跟踪器的工作台*/ .资产{ 宽度：calc100%-100px； 保证金：0px 50px 0px 50px； } .链接{ 颜色：1a9988； } .link:悬停{ 颜色：0f7567； } /*弹出窗口添加资产样式*/ /*情态背景*/ .增加资产{ 左：0； 排名前10%； 宽度：100%；/*全宽*/ 高度：自动；/*全高*/ 溢出：自动；/*根据需要启用滚动*/ 最大高度：无！重要； 填充底部：30px！重要； } 提交{ 字体大小：25px； 文本转换：大写； 高度：50px； 宽度：20%； 位置：绝对位置； 右：30px； 边界半径：10px； } 取消添加{ 字体大小：25px； 文本转换：大写； 高度：50px； 宽度：20%； 位置：绝对位置； 左：30px； 边界半径：10px； 背景色：f44336； } .制作动画{ -webkit动画：animatezoom 5s； 动画：animatezoom 5s 背景色：FEFE； } /*大宗报价*/ .blockquote_white{ 左边框颜色：白色； } /*信息箱*/ .信息箱{ 高度：自动； 最大高度：100%； 溢出：自动； 填充：0 25px 0 25px； } /*布线盒*/ .传单路径选择容器，.传单栏{ 显示：无； } @-webkit关键帧动画库{ 来自{webkit transform:scale0} 到{-webkit转换：scale1} } @关键帧动画空间{ 来自{transform:scale0} 到{transform:scale1} } @仅介质屏幕，最大宽度：600px{ .Assets:：-webkit滚动条{ z指数：10； } /*资产表*/ .资产{ 宽度：100%； 保证金：0px 0px 0px 0px； } 提交、取消\u添加{ 宽度：自动； } .模态内容{ 填充：0； } F 满的{ 宽度：100%； 左：0； } 报名{ 宽度：自动； 右：10px； } .取消{ 左边距：10px； } 电子邮件、密码、姓名、GPS\U ID、信息{ 宽度：100%； } } 资产跟踪 沃格资产脚趾 资产名称 Geef de GPS跟踪器een naam 激活码 激活代码van de tracker IMEI+korte激活字符串 其他gps信息 额外信息超过全球定位系统 添加 取消 更新帐户

---

首先，你的JS格式不正确。您有4个独立的文档就绪函数，以及香草JS和jQuery init的混合。选择1并坚持它。您只需要准备一个文档，然后所有需要等待dom加载的代码都放在里面

function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  });

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    // var options = 
    var instances = M.Dropdown.init(elems, {coverTrigger: false});
  });
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });
    $(document).ready(function() {
  $('.collapsible').collapsible();
})

我已经整理好了，把你的代码放进了一个代码笔，它对我的iPhone XR 13.3.1 Safari运行得非常好。你能发短信吗

document.addEventListener('DOMContentLoaded', function() {

    var modals = document.querySelectorAll('.modal');
    var modal = M.Modal.init(modals);

    var triggers = document.querySelectorAll('.dropdown-trigger');
    var trigger = M.Dropdown.init(triggers, {coverTrigger: false});

    var sidenavs = document.querySelectorAll('.sidenav');
    var sidenav = M.Sidenav.init(sidenavs);

    $('.collapsible').collapsible();

  });