javascript - 试图改变点击宽度

标签 javascript html css

关于 this ,我想获得相同的效果,然后我想我会在点击时更改我的 div 的宽度。

我有一个左边的 sidebardiv 和右边的 contentdiv,我有一个带有 onclick 触发器的图像,它隐藏了左边的 sidebardiv 并将右边的 contentdiv 宽度设置为 100%。
它确实隐藏了左侧的 sidebardiv 但它没有将 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 会按原样拉伸(stretch)。另外,当我打开 Firebug 时,我之前提到过。是否有某种来自 javascript 的 hack 可以模拟此事件?

更多信息

我发现了一些类似的帖子,例如:

javascript resize event firing multiple times while dragging the resize handle -> 我需要在触发 Page.toogle 函数时触发此调整大小事件,以便 div 正确拉伸(stretch)

最佳答案

leftsidebar is passed as an argument to the above function

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

关于javascript - 试图改变点击宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1859559/

相关文章:

javascript - 如何通过 javascript/不刷新自动保存 HTML5 搜索输入

javascript - 使用javascript获取数组中的所有css根变量并更改值

javascript - 在 React 中,在展开时为居中元素设置动画

CSS 不适用于使用 create-react-library 创建的链接 React 库

css - adobe flash builder 4 : css type selectors are not supported in components spark. components.Label

javascript - 在 AJAX 响应文本中调用类

javascript - CSV 字段导入格式问题

javascript - $log.debug 中的条件运算符

javascript - 使用 jQuery 的 remove 方法删除脚本标签时会发生什么

javascript - VueJS 嵌套构建器示例