Question

当我点击显示/隐藏图片时，我感到很困扰div_20将隐藏＆amp; iframe的宽度将增加，div_20的空间将为空格＆amp; iframe宽度将在水平方向上增加。请给我关于这个问题的指导。

我已经尝试使用jquery代码来显示/隐藏左侧菜单。

＆＃13;

$('#mainmenu').toggle(
  function()
  {
    $('#ifrm').css("width", '100%')
    $('#div_20').css("width", '5%')
    $('#ifrm').css("margin-left", '0')
  }, function() {
    $('#ifrm').css("width", '83.5%')
    $('#div_20').css("width", '17%')
    $('#ifrm').css("margin-left", '0%')
  });

＆＃13;

   <div  id="mainmenu">
     <a> 
        <i class="fa fa-align-justify"></i>
    </a> 
   </div>
   <div  id="div_20">
    //list of menus

    </div>

   <iframe id="ifrm" src="dashboard.php" name="ifrm2" scrolling="yes"></iframe>

＆＃13;

Answer 1

如果您可以指定＃div_20中的内容，这将有所帮助，因此：

<div id="mainmenu">
    <a><i class="fa fa-align-justify"></i></a> 
</div>
<div id="div_20">
    <ul>
      <li>Menu1</li>
      <li>Menu1</li>
      <li>Menu1</li>
      <li>Menu1</li>
      <li>Menu1</li>
   </ul>
</div>
<iframe id="ifrm" src="dashboard.php" name="ifrm2" scrolling="yes"></iframe>

然后，您可以使用以下jQuery代码

var newWIdth;
$('#ifrm').css({ marginLeft: 0 });
$('#div_20').height(100);       
$('#mainmenu > a').on('click', function()
{
    $('#div_20 > ul').toggle();
    newWIdth = $('#ifrm').width()+10;
    $('#ifrm').width(newWIdth);
    $('#ifrm').css({ marginLeft: 0 });
});

如何在图像的onclick上增加iframe宽度。

1 个答案: