移动响应能力，可在网络上使用，不适用于移动设备

Question

我有一个网站girlsjustwannahavefont.com

网站即将完成，但功能在移动设备上值得怀疑。 当我在移动设备上单击“查看我的进程”按钮时，它不起作用吗？ 但它在网络上运行良好。 任何HTML，CSS，JavaScript都可以阐明为什么会发生这种情况吗？ 需要说明的是，该按钮在Safari上或在我的iPhone上经过测试时不起作用。

这是模式的CSS代码。

.modal {
  background-color: $yellow;
  z-index: 300;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 20px 0px 100px 100px;
  color: $black;
  display: none;
}

这是单击该按钮时要执行的JavaScript代码。

$('.link').click(function() {
  m.id = $(this).attr('data-id');
  $('body').css('overflow', 'hidden');
  $("div[data-id=" + m.id).slideDown();
});
$('.close').click(function() {
  $("div[data-id=" + m.id).slideUp();
  $('body').css('overflow', 'auto');
})

Answer 1

有一个永远不会关闭的开放式括号，可能是问题所在：

("div[data-id=" + m.id)

尝试

("div[data-id=" + m.id + "]")

在所有事件处理程序中