0

メニューに配置されたlefと右に配置されたiframeを含むdivがあり、slideToggleでdivを表示/非表示にするボタンもあります。divが消えたときにiframeのサイズを自動的に変更して全体を取得します。ページの幅、および表示されたときにdivにスペースを与える、どうすればそれを達成できますか？

<script>
        $(document).ready(function(){
$(".flip").click(function(){
    $(".mmenu").slideToggle("slow");
  });
});
</script>
 <button class="flip">Show.Hide menu</button>
                     <div id="nav" class="mmenu" style="float: left; border-radius: 10px; position: fixed;
                             bottom: 75px;border: 5px solid #003366; bottom: 50px;">
                            <ul type="none">
                                <li><a target="collabsoft" href= "ProfilePage.php?property_variable=mine">My Profile</a></li>
                                        <li><a target="collabsoft" href= "viewMessages.php">Messages</a></li>
                                        <li><a target="collabsoft" href= "userHomepage.php">My Conferences</a></li>

                                    </ul>
                                </div>
                                <iframe scrolling="no" id="collabsoft" name="collabsoft" src="latestNews.php" style="position: relative;
                             width: 950px; height: 100%;></iframe>
4

4 に答える 4

1

まあ、これは可能な解決策です。または少なくとも1つの始まり：http：//jsfiddle.net/86Vgz/

于 2012-05-20T15:04:30.490 に答える
1

あなたはこれを試すことができます、私はあなたのコードを編集しました

 <script>
    $(document).ready(function () {
        if ($("#nav").is(':visible')) {
            $("#iframe1").attr("width", "68%");
        }
        else {

            $("#iframe1").attr("width", "100%");

        }
        $(".flip").click(function () {
            if ($("#nav").is(':visible')) {
                $(".mmenu").slideToggle("slow");
                $("#iframe1").attr("width", "100%");
            }
            else {
                $(".mmenu").slideToggle("slow");
                $("#iframe1").attr("width", "68%");

            }
        });
        return false;
    });
</script>
<input type="button" class="flip" value="Show/Hide menu" />
<div>
    <div id="nav" class="mmenu" style="float: left; border-radius: 10px; border: 5px solid #003366;
        bottom: 50px;">
        <ul type="none">
            <li><a target="collabsoft" href="#">My Profile</a></li>
            <li><a target="collabsoft" href="#">Messages</a></li>
            <li><a target="collabsoft" href="#">My Conferences</a></li>
        </ul>
    </div>
    <iframe id="iframe1" scrolling="no" id="collabsoft" name="collabsoft" src="" style="height: 100%;">
    </iframe>
</div>
于 2012-05-20T14:54:29.760 に答える
1

基本的にと同じ解決策@Pakauji Pakauですが、少し単純な場合：http: //jsfiddle.net/RichardTowers/x6djM/1/。

表示と非表示でさまざまなことが行われているので、を使用するのではなく、明示的にshow()使用します。hide()slideToggle()

于 2012-05-20T15:00:33.397 に答える
0

DIVを使用して左側のスペースを占有し、クリックするとメニューの幅を転送することもできます

$(document).ready(function(){
    $("#nav").width($("#nav ul").outerWidth());
    $(".flip").click(function(){
    $(".mmenu").slideToggle("slow");
    $("#nav").width($("#nav ul").outerWidth());
});

アニメーションを保存するには、上記の作業がさらに必要です

<body>
       <button class="flip">Show.Hide menu</button><br/>
   <div style="display:table;width:100%;border:solid 10px lime">
          <div id="nav" class="mmenu" style="display:table-cell">
             <ul type="none" style="border-radius: 10px; position: fixed; bottom: 75px;border: 5px solid #003366; bottom: 50px;">
                <li><a target="collabsoft" href= "ProfilePage.php?property_variable=mine">My Profile</a></li>
                <li><a target="collabsoft" href= "viewMessages.php">Messages</a></li>
                <li><a target="collabsoft" href= "userHomepage.php">My Conferences</a></li>

             </ul>
          </div>
          <iframe scrolling="no" id="collabsoft" name="collabsoft" style="position: relative; width: 100%; height: 100%;display:table-cell">XXX</iframe>
</div>
</body>
于 2012-05-20T15:07:20.917 に答える