c# - 使用 JQuery 隐藏左列时增加右列宽度（反之亦然）

Question

我看过：
可调整大小的控件和这个论坛链接
，都 没有找到合适的分辨率。

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

我希望能够隐藏菜单，并将 PDFviewer 扩展到整页。
不幸的是，我目前只能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>

Default.aspx 上的 Javascript 片段

    <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>