Question

关注this，我希望得到相同的效果，然后我想我只会在点击时更改div的宽度。

我右侧有一个左侧边栏和内容，我有一个带有onclick触发器的图像，它隐藏了左侧边框，并将正确的contentdiv宽度设置为100％。
它确实隐藏了leftbardiv但是没有将contentdiv扩展到100％，当我按下firebug打开时发生奇怪的事情，就在它打开contentdiv然后扩展到100％之后，任何人都可以弄清楚是什么我做错了？

谢谢

这是一些HTML：

<div id="content_holder">
<div class="leftsidebar" id="sidebar">
....
</div>
<div class="content" id="content">
....
</div>
</div>

这是javascript：

var flag = false;

          Page.toogle = function(id)
          {
              var x = document.getElementById('content');
              if(!flag){
                    document.getElementById(id).style.display = 'none';
                    x.style.width = '99%';
                             flag=1;
                }
              else {
                    x.style.width = '683px';
                    document.getElementById(id).style.display = '';
                             flag=0;
                }
          }

leftsidebar作为参数传递给上述函数

这里有一些CSS：

div.content {
        display: block;
        float: left;
        width: 683px;
        text-align: left;
        margin-left:10px;
    }

     div.leftsidebar {
    padding-bottom:20px; 
    width:303px; 
    background: url('left_holder.png') left bottom no-repeat;
}

最新更新：

当我点击窗口恢复按钮并返回时，div应该像应该的那样拉伸。当我打开萤火虫时，我之前提到过。是否存在某些可以模拟此事件的javascript攻击？

更多信息

我发现了类似的帖子：

javascript resize event firing multiple times while dragging the resize handle - ＆gt;当我触发我的Page.toogle函数时，我需要触发此调整大小事件，以便div正确拉伸

Answer 1

leftsidebar作为参数传递到上面的功能

您正在将类名传递给函数，而不是ID。

Answer 2

这一行出现错误：

if(x.style.width = '683px')

你需要两个等号：

if(x.style.width == '683px')

Answer 3

我认为这是在你Page.toogle

的电话中

当我把它变成像http://jsbin.com/iyeka/edit这样的常规函数时，它似乎工作得很好......

toogle 切换？

Answer 4

鉴于内容是浮动的，不是基于百分比的宽度将从层次结构中的最后一个父元素计算出来，该元素被赋予硬宽度，或者如果没有它的固有宽度？

如果您为#contentholder提供px / pt / cm的硬宽度，或者在您的动态宽度分配中使用前一个单位的内容，会发生什么？

Answer 5

页面浏览器很可能没有触发onresize事件到您的浏览器。当你打开firebug时，它会被触发，而你的resize事件处理程序又会触发它。尝试甚至调整页面本身的大小，它也应该触发。

这是因为你的div是浮动的，所以布局不是相对的。一种解决方案是在调整leftdiv的大小时手动触发onresize事件。

Answer 6

这是我推荐的内容。

使用jQuery而不是普通的旧javascript来做这种事情。对于浏览器漏洞，通常会内置解决方法。
不要只使用width属性来更改宽度，而是使用宽度设置创建一个css类，并使用jquery在div中切换css类。

之前我修改了div，它对我来说很好。但我总是使用jQuery做到这一点。

Answer 7

您应该可以使用以下内容触发resize事件处理程序：

window.resizeBy(1,1);
window.resizeBy(-1,-1);

试图改变点击的宽度

7 个答案: