使用JQuery增加隐藏左列的右列宽度(反之亦然)

Question

>我看过：
可调整大小的控件，
和这个论坛链接，
所有这些都没有找到适当的解决方案。

我有一个有 2 列的页面（没有母版页）。一旦列包含菜单结构，另一个是PDF查看器。

我希望能够隐藏菜单，并将PDF查看器扩展到整页。
不幸的是，我目前只有Hide()选项有效。

下面是一些代码：

样式表.css

body {
}
.wrapper {
    margin: 0 auto;
}
.left {
    width: 25%;
    float: left;
    background: #f4f4f4;
    overflow: hidden;
}
.right {
    width: 75%;
    float: right;
    margin-top: -20px;
    padding-top: -20px;
}

默认.aspx

<div class="wrapper">
                    <div runat="server" id="left" class="left">
                        <div style="padding-top: 10px">
                            <asp:Label runat="server" Text="File List" Font-Size="20px" Font-Bold="True"></asp:Label>
                            - <a id="uploadLink" href="Upload.aspx">Upload</a>
                            <br />
                            <br />
                            <!-- Menu structure -->
                        </div>
                    </div>
                    <div class="right" id="right">
                    <a id="showh1">+</a>
                    <a id="hideh1">-</a>
                        <div style="border: 1px solid grey;">
                            <iframe runat="server" id="pdfHolder" width="100%" seamless="seamless" title="Doc"></iframe>
                        </div>
                    </div>
                    <asp:Label runat="server" ID="lbltest" Text=" ---- " Visible="False"></asp:Label>
</div>

默认的Javascript片段.aspx

    <script type="text/javascript">
        $(document).ready(function () {
            $('#hideh1').click(function () {
                $('div.left').hide("Drop");
            });
            $('#showh1').click(function () {
                $('div.left').show("Drop");
            });
        });
    </script>

我怎样才能正确地做到这一点？

Answer 1

试试这个：

<script type="text/javascript">
    $(document).ready(function () {
        $('#hideh1').click(function () {
            $('div.left').hide("Drop");
            $('div.right').css("width", "100%");
        });
        $('#showh1').click(function () {
            $('div.left').show("Drop");
            $('div.right').css("width", "75%");
        });
    });
</script>