div和iframe在頁面旁邊彼此

我有一個div包含菜單對齊的左邊框和右對齊的iframe，也是slideToggle顯示/隱藏div的按鈕，我想要做的是使iframe當div消失以自動調整頁面的整個寬度時自動調整它的大小，並在div出現時爲div賦予空間，我該如何實現這一點？div和iframe在頁面旁邊彼此

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

來源

2012-05-20 Samer El Gendy

你爲什麼使用iframe？這可能會影響解決方案。 –

@Blowski我必須使用iframe來加載網站中的內容。 –

爲什麼內容沒有直接加載到頁面中，而是在iframe中加載？ iframes有各種各樣的問題，你應該使用它們作爲最後的手段。 –

基本上相同的解決方案@Pakauji Pakau，但對於一個稍微簡單的情況：http://jsfiddle.net/RichardTowers/x6djM/1/。

由於有不同的東西上顯示和隱藏的時候，我會用show()和hide()明確，而不是slideToggle()。

來源

2012-05-20 15:00:33 RichardTowers

非常感謝，這就是我需要 –

你可以試試這個，我已編輯代碼

<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-20 14:54:29

嗯，這是一個可能的解決方案。或至少一個的開頭：http://jsfiddle.net/86Vgz/

來源

2012-05-20 15:04:30 koenpeters

你也可以使用一個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-20 15:07:20

div和iframe在頁面旁邊彼此

回答

相關問題