0

我有一个包含左对齐菜单和右对齐 iframe 的 div，还有一个用于显示/隐藏 div 的 slideToggle 按钮，我想做的是让 iframe 在 div 消失时自动调整大小以占据整个页面的宽度，并在出现时为 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

嗯，这是一个可能的解决方案。或者至少是一个开头：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()andhide()而不是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 回答