Question

我要这样做，所以当我单击Facebook图标时，会打开一个对话框，您可以在其中看到特定页面的提要。

所以基本上，我想创建一个功能（使用jQuery）来切换iframe（从Facebook生成）的可见性。

这在我的网站https://sjaeloglegeme.dk/上有效，但是在移动设备上-当我点击Facebook图标时，iframe不会“显示自身”。

我创建了一个JSFiddle来向您展示我的代码，但是由于某些原因，它甚至无法在我的PC上运行。我不知道我在做什么错...

HTML：

<a href="#" id="fb"><img src="https://vanineveld.github.io/sjaeloglegeme/img/fb.svg" alt="facebook logo"></a>

<iframe id="fbDialog" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fsjaeloglegeme%2F&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

CSS：

#fb {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

#fb img {
  height: 30px;
  width: auto;
}

#fbDialog {
  position: fixed;
  bottom: 70px;
  left: 30px;
  display: none;
}

jQuery：

$('#fb').on('click', function() {
    $('#fbDialog').toggle();
});

Answer 1

您看过this topic吗？

或者尝试像这样在代码中添加event.preventDefault（）：

$('#fb').on('click', function(e) {
    e.preventDefault();
    $('#fbDialog').toggle();
});

Answer 2

我已经通过手机检查了您的https://sjaeloglegeme.dk/网站。 iframe完全正常运行。或者您可以更改#fb位置：绝对；在容器上显示它。

当我在移动设备上单击锚点时，切换功能不起作用

2 个答案: