Question

我正在使用一种带有bootstrap 3和jquery cookie的新型offcanvas技术。我正在使用this HTML模型，后面跟着CSS和jquery。

CSS

    body {
        padding-top: 50px;
        overflow: hidden;
    }

    #wrapper {
        min-height: 100%;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0;
        display: inline-block;
    }

    #main-wrapper {
        height: 100%;
        overflow-y: auto;
        padding: 50px 0 0px 0;
        transition: all .5s linear;
        -moz-transition: all .5s linear;
        -webkit-transition: all .5s linear;
        -o-transition: all .5s linear;
    }

    .no-transition {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        -ms-transition: none !important;
        transition: none !important;
    }

    #main {
        position: relative;
        height: 100%;
        overflow-y: auto;
        padding: 0 15px;
    }

    #sidebar-wrapper {
        height: 100%;
        padding: 50px 0 0px 0;
        position: fixed;
        border-right: 1px solid gray;
    }

    #sidebar {
        position: relative;
        height: 100%;
        overflow-y: auto;
        padding: 10px 15px 0;
        overflow-x: hidden;
    }

    .page-header {
        margin-top: 10px;
    }

   /* Media conditions removed intentionally */

JQuery的

    $(function () {
        var $menu = $('#sidebar-wrapper');
        var $content = $('#main-wrapper');
        if ($.cookie('offcanvas') == 'hide') {
            $content.addClass('no-transition');
            $menu.hide();
            $content.removeClass('col-md-10').addClass('col-md-12');
        }
        else if ($.cookie('offcanvas') == 'show') {
            $menu.show(500).animate({ left: 0 });
            //  $menu.show();
            $content.removeClass('no-transition');
            $content.removeClass('col-md-12').addClass('col-md-10');
        }
        $('.toggle-button').click(function () {
            $content.removeClass('no-transition');
            if ($menu.is(':visible') && $content.hasClass('col-md-10')) {
                // Slide out
                $menu.animate({
                    left: -($menu.outerWidth() + 10)
                }, function () {
                    $menu.hide(1000);
                });
                $content.removeClass('col-md-10').addClass('col-md-12');
                $.cookie('offcanvas', 'hide');
            }
            else {
                // Slide in
                $menu.show(500).animate({ left: 0 });
                $content.removeClass('col-md-12').addClass('col-md-10');
                $.cookie('offcanvas', 'show');
            }
        });
        $('.bs-tooltip').tooltip();
    });

请参阅fullscreen demo。单击Cog图标将显示并隐藏带动画的div，刷新页面将根据cookie保留可见或隐藏状态。

所有工作正常，但是，只需折叠左侧边栏，刷新页面，然后单击齿轮，侧边栏将不会从左侧动画。此外，如果页面刷新时cookie为col-md-10，则动画将应用于hide类。

如何解决这些问题？

感谢。

更新

这是更新的小提琴和全屏演示，带有固定解决方案。任何有兴趣的人都可以使用这个模型。

http://jsfiddle.net/ravimallya/Y7P7h/6/

http://fiddle.jshell.net/ravimallya/Y7P7h/6/show/

Answer 1

问题是当你刷新页面和你的cookie＆＃39; offcanvas＆＃39;价值是“隐藏”，你只是隐藏了侧边栏但没有设置它的css风格＆＃39; left＆＃39;值，因此左边默认为0.当你点击图标来切换侧边栏时，你试图动画左边0，它已经是它的值。

要解决此问题，您还需要在Cookie＆＃39; offcanvas＆＃39; off时为侧栏设置css样式左值（即$ menu）。价值是隐藏＆＃39;如下：

...
if ($.cookie('offcanvas') == 'hide') {
    $content.addClass('no-transition');
    $menu.hide();
    $menu.css('left', -($menu.outerWidth() + 10));
    $content.removeClass('col-md-10').addClass('col-md-12');
}
...

使用jquery cookie时，隐藏div水平动画

1 个答案: