jquery - Bootstrap 3 - 可折叠的右侧面板，如 Google Drive Details/Activity 面板

Question

正在为我们现有的产品设计新的网络布局。我们希望集成的团队聊天和事件提要显示始终显示在每个页面的右侧。我们使用的是 Bootstrap 3，我有一个看起来不错的模拟。我正在使用 vanilla Bootstrap 12 列大小调整样式来执行此操作:

现在我们希望允许用户折叠右侧面板(水平)，特别是对于水平空间很重要的 View ( GridView 等)。

是否有 Bootstrap 方法可以做到这一点？我对垂直拆分器小部件、顶部导航中的切换按钮或任何其他有意义的表示都很好。我需要更多关于网格大小的建议。

Answer 1

我的一个元素需要类似的方法，全屏 View 是 here .

我修改了脚本和布局，以实现您想要实现的目标。 here是代码，全屏是 here .即使在页面刷新后，我也使用 jquery cookie 来保留 View 状态。单击齿轮图标 将切换侧边栏。脚本是:

    $(function () {
        var $menu = $('#sidebar-wrapper');
        var $content = $('#main-wrapper');
        if ($.cookie('offcanvas') == 'hide') {
            $content.addClass('no-transition');
            $menu.hide();
            $menu.css('right', -($menu.outerWidth() + 10));
            $content.removeClass('col-md-10').addClass('col-md-12');
        }
        else if ($.cookie('offcanvas') == 'show') {
            $menu.show(500).animate({ right: 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({
                    right: -($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({ right: 0 });
                $content.removeClass('col-md-12').addClass('col-md-10');
                $.cookie('offcanvas', 'show');
            }
            if ($content.hasClass('col-md-12') && $menu.is(':hidden')) {
                $menu.animate({
                    right: 0
                }, function () {
                    $menu.show(1000);
                });
                //  $menu.show();
                $content.removeClass('no-transition');
                $content.removeClass('col-md-12').addClass('col-md-10');
            }
        });
        $('.bs-tooltip').tooltip();
    });

您可以自定义布局/css 以获得您想要的内容。