1

我有一个使用 jQuery 隐藏/显示面板的应用程序。这是一个显示原理的aspx版本：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#ClickMe').click(function () {
            $('#Panel').toggle();
            $('#Width').text($(window).width());
        });
        $('#Width').text($(window).width());
    });
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <fieldset id="FS1">
        <legend id="ClickMe">Click Me</legend>
        <div id="Panel" style="display:;width:auto">
            <label for="A">A</label>
            <input id="A" name="A" type="text" value="" />
        </div>
    </fieldset>
    <span id="Width">0</span>
</asp:Content>

这按预期工作。$(window).width() 总是返回相同的值。

在应用程序中，最初或“面板”隐藏时返回的值是正确的，但当它可见时，返回的值会少 17 个像素。

什么会影响 jQuery 返回的值？

4

1 回答 1

0

正如已经指出的那样，它可能是一个产生影响的滚动条。要在没有滚动条的情况下计算宽度，您必须在计算时强制主体隐藏它们。像这样的东西：

//hide the scrollbars
$('body').css({overflow: 'hidden'});
//get the window width here
var windowWidth = $(window).width();
//and now we put the scrollbars back
$('body').css({overflow: 'auto'});
于 2013-05-03T17:09:44.080 回答