0

我有一个网页，它是一个长文档，左侧有一个导航窗格。HTML基本上是

<body style="display:block;">
    <div id="nav-pane" style="width:340px; height:100%; position:absolute;">
         ....
    </div>
    <div id="main-page" style="left:371px; height:100%; position:fixed;">
         ....
    </div>
</body>

我有一个 javascript 函数来隐藏导航窗格以在较小的屏幕上查看文档，但是当我在 IE 8/9 中调用 $("#nav-pane").hide() 时，页面视图被带回顶部的页面。其他浏览器工作正常

编辑：页面中的样式链接很好

触发器是

<div id="close-button" onclick="hideMenu()">
    <img src="/wp-content/uploads/images/original/close-button.png">
</div>

和javascript函数是

function hideMenu()
{
    $("#nav-pane").hide();
}
4

3 回答 3

2

在没有进一步信息的情况下，有几个猜测：

猜一猜

您的真实代码是否也缺少两个 div"的属性末尾的？style

<body style="display:block;">
    <!--                                                     here -------v -->
    <div id="nav-pane" style="width:340px; height:100%; position:absolute;>
         ....
    </div>
    <!--                                              and here -------v -->
    <div id="main-page" style="left:371px; height:100%; position:fixed;>
         ....
    </div>
</body>

这可能会导致在解析标记时发生各种奇怪的事情。

猜猜 2

您说“其他浏览器工作正常”的说法令人惊讶，但是：

您还没有显示您的代码或您如何触发它的标记，但我猜您有：

<a href="#">the link</a>

...以及它的处理程序：

$("selector for the link").click(function() {
    $("#nav-pane").hide();
});

您需要阻止用于隐藏 div 的链接的默认操作。在 jQuery 中，您可以通过调用preventDefault它传递给您的处理程序的事件对象或return false;从处理程序（这将阻止默认值并停止传播）来做到这一点。例如：

$("selector for the link").click(function() {
    $("#nav-pane").hide();
    return false;
});
于 2012-07-26T09:19:03.327 回答
1

T.J. Crowder's answer should solve your issue. However, I have experienced a similar problem with IE. When changing the display or overflow properties of a parent element the browser would redraw the document and reset the scroll position to 0.

Most probably there is a problem with your markup - as I mentioned in my case it was a parent element (body or html).

Anyway, to solve this you can record the window scroll position before the hide action and then scroll the window to the recorded position afterwards:

var scrollPosition = $(window).scrollTop();
// your hide action here, and then:
if ($(window).scrollTop() !== scrollPosition) {
    $(window).scrollTop(scrollPosition);
}
于 2012-07-26T09:42:38.593 回答
0

看来我的标记有问题。只需在控制台中将 div 设置为 display:none 就足以重置窗口。我目前有一个解决方法，方法是将 div 的宽度设置为 0，并将可见性设置为隐藏，同时我可以确定是否是 Aspose 在转换 word 文件或我的程序时创建了问题，从而使来自 Apsose 的页面实际上看起来不错并且可以工作适当地。

多谢你们

于 2012-07-27T12:34:51.587 回答