Javascript 如何获得实时窗口宽度并在div中实时应用它？

我在项目中使用jQuery-1.11.0。我有一个水平菜单，它看起来像滑动菜单。我的问题是IE对过渡的支持（我应用过渡来平滑滑动）。我的菜单适用于大多数浏览器，但不适用于IE9及更低版本。所以我决定用Jquery来做这件事，我得到了解决方案。当我的页面加载时，它工作正常（我的计划是首先将

left:calc（-100%+50px）；

添加到我的css中，然后当我点击折叠按钮时，我会将此css更改为

left:0px；

所以当点击折叠按钮时，它会消耗并重新启动，并恢复到

left:calc（-100%+50px）

所以它被折叠了。但似乎jquery无法对

左：calc（-100%+50px）；

这种类型的css进行动画制作。我用jquery

.animate（）

方法尝试过。但问题是在扩展菜单后，当我折叠菜单时，它不会显示任何滑动动画。它只是将css添加到菜单中。

这是我的第一次尝试
这是我的第二次尝试
这是我的最新尝试

---

哪种方法最好，我可以做些什么来解决这个问题？

要获得实时窗口宽度，请使用以下代码：

$(function() {
    $(window).resize(function() {
        var width = $(window).width();
        // update the width of your element, the below line is just an example on how to do that
        $("#someElementId").css("width", width);
    });
});

window.innerWidth

提供窗口的视口宽度

window.width

提供整个窗口的宽度

---

谢谢

为了获得窗口的宽度，您必须记住用户可能会调整其浏览器的大小。这就是为什么我们使用jQuery resize函数包装代码以实时更新宽度。请检查以下代码：

$(function() {
    $(window).resize(function() {
        var width = $(window).width();
        // update the width of your element, the below line is just an example on how to do that
        $("#someElementId").css("width", width);
    });
});

---

这是另一个答案。我修复了你的javascript。应该调整大小。我所做的是在调整大小时调整菜单的大小并重新定位。这样依赖于菜单的按钮就会随之移动。下面是javascript代码

(function($) {
    $(".button").on("click", function() {
        if ($(".menu").css("left") == "0px") {
            $(".menu").stop().animate({
                left: -1 * $(window).width() + 30
            }, 'slow');
        } else {
            $(".menu").stop().animate({
                left: 0
            }, 'slow');
        }
    });

    $(window).resize(function() {
        var width = $(window).width();

        $(".menu").css("width", width);

        if ($(".menu").css("left") != "0px") {
            $(".menu").css("left", (-1 * $(window).width() + 30));
        }

    });

}(jQuery));

---

@ShohidulAlam此代码适用于resize，您需要在resize函数之外的ready上调用它。在文档就绪行之后直接调用此代码：$（“#someElementId”）.css（“width”，$（window.width（））|@ShohidulAlam我添加了缺少的分号，这是一个显示代码的箱子：| |检查这个箱子是如何调整大小的，尽管在CSS中它的宽度是50px。谢谢帮助！但我的问题仍然没有解决。请查看第三个JSFIDLE并阅读JSFIDLE中的文本。