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 に答える