jquery 更新视口?

Mar*_*las 2 jquery layout viewport galleria

我无法解决我遇到的布局问题,并希望获得一些见解。

我在左侧有一个可以打开和折叠的菜单面板,在右侧我有 Galleria,它设置为响应模式,这意味着如果窗口大小发生更改,它会调整大小。

我要实现的目标是,当我的菜单面板折叠时,我希望响应式 Galleria 能够调整大小,反之亦然。

现在,如果面板从折叠位置开始并展开,则文档宽度会增加菜单面板的宽度,并且 Galleria 不会调整大小。从这里开始,如果我手动调整浏览器的大小,即使是单个像素,布局也会刷新,一切都很好。

因此,我开始寻找可以更新视口的方法,而无需实际更改大小,以便 Galleria 做出反应,就好像视口发生了变化一样。下面是我用于切换菜单的代码。我正试图将文档大小强制为原始大小,但即使这样也无法产生结果。

谢谢您的帮助

var documentWidth = $(document).width();
    var documentHeight = $(document).height();
    function hideMenu() {
        $('#User_Menu').hide("slide", { direction: "left" }, 1000, function () {
            showOpenMenu();
            $.cookie('pj-userMenuTab', 'block')
            $(document).width(documentWidth);
        });
    }
    function showOpenMenu() {
        $('#Open_User_Menu').show("slide", { direction: "left" }, 500);
        $.cookie('pj-userMenu', 'none')
    }
    function showMenu() {
        $('#Open_User_Menu').hide("slide", { direction: "left" }, 500, function () {
            hideOpenMenu();
            $.cookie('pj-userMenu', 'block');
        });
    }
    function hideOpenMenu() {
        $('#User_Menu').show("slide", { direction: "left" }, 1000);
        $.cookie('pj-userMenuTab', 'none')
        alert('...' + documentWidth);
        $(document).width(documentWidth);
        alert($(document).width());
    }
Run Code Online (Sandbox Code Playgroud)

Ink*_*bug 5

根据评论,需要触发resize事件,以便 Galleria 插件调整大小。

以下代码(当添加到打开/关闭函数时)应该可以工作:

$(window).trigger("resize");
Run Code Online (Sandbox Code Playgroud)