Question

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

我左边是一个打开和折叠的菜单面板，右侧是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());
    }

Answer 1

根据评论，必要的是触发resize事件，以便Galleria插件重新调整大小。

以下代码（添加到打开/关闭功能时）应该有效：

$(window).trigger("resize");

jquery更新视口？

1 个答案: