jPanelMenu在IE(所有版本)中不能正常工作

Question

我在我的一个网站上使用jPanelMenu jQuery插件。我注意到IE(所有版本)有一个问题。

当菜单被触发时，它会像预期的那样滑动进来。单击菜单项后，页面将滚动到所需的部分并再次关闭。当菜单关闭时，网站的右侧会有多余的空白。当再次打开菜单时，它的大小是原来的一半，并再次关闭内容的空白。

这是一把小提琴:http://jsfiddle.net/huzLU/1/

和三个显示IE问题的截图:

• https://i.stack.imgur.com/FKask.jpg
• https://i.stack.imgur.com/ItIBa.jpg
• https://i.stack.imgur.com/99s9S.jpg

下面是我用于菜单的代码:

<script>
$(document).on('touchend',jP.panel,function(e){
e.preventDefault();
if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated);
});
$(document).on('click',jP.panel,function(e){
e.preventDefault();
if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated);
});
</script>
<script>
$(document).ready(function(){
var jPM = $.jPanelMenu({
closeOnContentClick: false
});
jPM.on();
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-50
}, 900, 'swing', function () {
window.location.hash = target;
});
setTimeout(function() {
jPM.close(true);
}, 900, 'swing');
});
});
</script>

也;以下是网站链接:www.didson.nl

我希望有人能帮助我，提前感谢!

Answer 1

编辑:试试这个新的小提琴。我修复了setTimeout调用关闭。(实际上，您根本不需要设置超时)

对

这个问题与样式有关。它正在用class "来设置div。jPanelMenu-panel"到"position: relative;"这会导致一些问题。

在这个小提琴中，你可以看到如何通过将位置设置为绝对，解决这个问题。这个过渡看起来很糟糕，当然，但我让你来决定。

你的版本的HTML:

<div class="jPanelMenu-panel" style="position: relative; left: 0px;">

我添加的行:

    $(".jPanelMenu-panel").css('position', 'absolute');

希望有帮助!