Question

我在我的项目中使用jQuery-1.11.0。我有一个水平菜单，它看起来像滑动菜单。我的问题是IE支持转换（我应用了过渡以实现平滑滑动）。我的菜单适用于大多数浏览器，但不适用于IE9及更低版本。所以我决定用Jquery做这个，我得到了解决方案。当我的页面加载时它工作正常（我的计划是首先我将left: calc(-100%+50px);添加到我的CSS中，然后当我的折叠按钮单击时，我将此css更改为left: 0px;，这样它将在折叠按钮时消耗和减少点击它恢复到left: calc(-100%+50px);所以它崩溃了。但似乎jquery不能为这种类型的css left: calc(-100%+50px);设置动画。我用jquery .animate()方法尝试了这个。但问题是在花费之后菜单当我去折叠菜单时它没有显示任何滑动动画。它只是将css添加到菜单中。

这是我的第一次尝试jsfiddle
这是我的第二次尝试jsfiddle
这是我最近的尝试jsfiddle

哪种方法最好，我该怎么做才能解决这个问题？

Answer 1

这是另一个答案。我修复了你的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));

Answer 2

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

window.innerWidth为您提供窗口的视口宽度 window.width为您提供整个窗口宽度。

由于

Answer 3

为了获得窗口的宽度，您必须记住用户可能会调整浏览器的大小。这就是为什么我们用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);
    });
});

如何获取实时窗口宽度并将其应用于div？

3 个答案: