Question

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

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

Answer 2

基本上与@Pakauji Pakau的解决方案相同，但对于稍微简单的情况：http://jsfiddle.net/RichardTowers/x6djM/1/。

由于展示和隐藏的内容不同，我会明确使用show()和hide()，而不是slideToggle()。

Answer 3

嗯，这是一个可能的解决方案。或者至少是一个开头：http://jsfiddle.net/86Vgz/

Answer 4

您还可以使用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>

div＆amp; iframe在页面中彼此相邻

4 个答案: