Question

我看过：
The resizable control，
和this forum link，
都没有找到合适的解决方案。

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

我希望能够隐藏菜单，并将PDFviewer展开到整页不幸的是，我目前只有Hide()选项正常工作。

以下是一些代码：

样式Sheet.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;
}

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

使用JQuery隐藏左列时增加右列宽度（副Versa）

1 个答案: