0

私は見ました：
サイズ変更可能なコントロール、
およびこのフォーラムリンク、
すべて適切な解決策を見つけることなく。

2列のページ（マスターページなし）があります。1つの列にはメニュー構造が格納され、もう1つの列には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;
}

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>

どうすればこれを正しく行うことができますか？

4

1 に答える 1

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>
于 2012-11-20T11:50:23.767 に答える