Question

我添加了一个JS绑定器来从div中删除滚动条，我能够实现它。

不确定如何解释我的问题，但是一旦设置overflow: hidden，子元素的宽度就不会重新调整大小。

Answer 1

从我理解的问题来看..你想减小盒子的大小..

您可以从jquery本身设置它..

$("#hide-overflow").click(function() {
    if($(this).is(":checked")) {
        $(".box").css({overflow: "hidden"});
        $(".box").css({height: "20px"});
    } else {
        $(".box").css("overflow", "auto");
        $(".box").css({height: "100px"});
    }
})

检查fiddle ...

Answer 2

您在<div class="header"内使用了<div class="box"。您需要重新构建html并需要使用下面的一些JQuery更改来修改标头css（请查找JSFiddle相同）

<强> CSS

.header {
    background-color:red;
    width: 100px;
}

<强> HTML

   <div class="header">
        Testing
    </div>
    <div class="box">
    This is a random text <br> 
    This is a random text <br> 
    This is a random text <br> 
    This is a random text <br> 
    This is a random text <br> 
    This is a random text <br> 
    This is a random text <br> 
    This is a random text <br> 
    This is a random text <br> 
    This is a random text <br> 
    </div>

<强> JQuery的

$("#hide-overflow").click(function() {
    if($(this).is(":checked")) {
        $(".box").css("overflow","hidden");
        $(".box").css("height","100%");
    } else {
        $(".box").css("overflow", "auto");
        $(".box").css("height","100px");
    }
})

这里我将标题分隔为与box div相同的宽度，即100px。在JQuery中，我将高度设置为100%，没有滚动条并将其重置为100px以进行滚动。

JS触发溢出隐藏不调整子元素宽度

2 个答案: