在窗口调整大小时更改CSS会中断CSS

Question

如何重新创建：

• 打开这个JSFiddle：https://jsfiddle.net/y408c0u9/7/
• 让标签打开显示器的75%，然后运行Fiddle

正如你所看到的，你可以通过将鼠标悬停在灰色方框上来增加它的大小。

• 将选项卡的宽度调整为最小值（灰色框将消失）
• 将大小调整回以前和现在的样子，CSS:hover将不再工作

令人烦恼的是，我可以通过更改javascript代码来修复它：

$(document).ready(function () {
    $(window).resize(function(){
        if ($(window).width() < 640) {
            $('.content').css({
                'width': '100%',
                    'left': '0px'
            });
            $('.menu-button img').attr('src', 'test/lines.png').load(function () {
                this.width;
            });
        }
    if ($(window).width() > 640) {
            $('.content').css({
                'width': 'calc(100%-50px)',
                    'left': '50px'
            });
        }
    });//<-- removing this

破坏代码并使用开括号显然不是一种修复方法，这会导致我的javascript的其他部分出现问题。

为什么在将css改回使用JQuery/Javascript时会有不同的行为？

Answer 1

问题是当您重新调整大小时，这一行：

$('.content').css({
    'width': 'calc(100%-50px)',
    'left': '50px'
});

正在将类内容样式设置为：

left: 50px;
width: 100%;

左边：50px是破坏行为的原因，由于它是一个样式标记，它将始终覆盖css标记。如果将灰色框向后拖动超过640px时将其更改为删除左侧，则它将起作用。请在此处查看小提琴：https://jsfiddle.net/y408c0u9/8/

不过，我建议您使用css中的媒体查询来完成此操作。Javascript可能很难在中维护响应行为，您可以在css中做到这一点。