我在我的一个网站上使用 jPanelMenu jQuery 插件。我注意到 IE(所有版本)中存在问题。
当菜单被触发时,它会按预期滑入。单击菜单项后,页面滚动到所需的部分并再次关闭。当菜单关闭时,网站的右侧会出现不需要的边距。再次打开菜单时,它的大小缩小了一半,再次缩小了内容的差距。
这是一个 fiddle : http://jsfiddle.net/huzLU/1/
三个屏幕截图显示了 IE 中的问题:
- http://i.stack.imgur.com/FKask.jpg
- http://i.stack.imgur.com/ItIBa.jpg
- http://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
我希望有人能帮助我,在此先感谢!
最佳答案
编辑:试试这个新的 Fiddle . 我修复了 setTimeout 调用以关闭。 (实际上,您根本不需要设置超时)
问候
问题与样式有关。它将类为“.jPanelMenu-panel”的 div 设置为“position: relative;”这导致了一些问题。
在此Fiddle您可以看到如何通过将位置设置为绝对位置来解决问题。过渡看起来很糟糕,当然,但我让你来决定。
您的版本的 HTML:
<div class="jPanelMenu-panel" style="position: relative; left: 0px;">
我添加的行:
$(".jPanelMenu-panel").css('position', 'absolute');
希望对您有所帮助!
关于javascript - jPanelMenu 在 IE(所有版本)中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23814158/