jQuery Bootstrap 3 - 可折叠的右侧面板，如 Google Drive 详细信息/活动面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22951823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - Collapsible right-side panel like Google Drive Details/Activity panel
提问by mtutty
Working on a new web layout for our existing product. We'd like the integrated team chat and activity feed displays to be consistently displayed on the right side of each page. We're using Bootstrap 3 and I've got a mock that looks pretty good. I'm using vanilla Bootstrap 12-column sizing styles to do this:
为我们现有的产品设计新的网页布局。我们希望集成的团队聊天和活动提要显示始终显示在每个页面的右侧。我们正在使用 Bootstrap 3，我有一个看起来不错的模拟。我正在使用 vanilla Bootstrap 12 列大小调整样式来执行此操作：
Now we want to allow users to collapse that right-side panel (horizontally), especially for views where horizontal real estate is important (grid views, etc.).
现在我们希望允许用户折叠右侧面板（水平），特别是对于水平房地产很重要的视图（网格视图等）。
Is there a Bootstrap way to do this? I'm fine with a vertical splitter widget, or a toggle button in the top nav, or whatever other presentation makes sense. It's more the grid sizing that I need advice on.
有没有 Bootstrap 方法来做到这一点？我可以使用垂直拆分器小部件、顶部导航中的切换按钮或任何其他有意义的演示文稿。更多的是我需要建议的网格大小。
回答by Ravimallya
I had needed a similar approach to one of our projects and fullscreen view is here.
我需要对我们的一个项目采用类似的方法，全屏视图就在这里。
I modified the script and layout a bit to get what you trying to achieve. hereis the code and fullscreen is here. I used jquery cookie to retain the view state even after page refresh. Clicking on the Cog Iconwill toggle the sidebar. The script is:
我稍微修改了脚本和布局以获得您想要实现的目标。这里是代码，全屏在这里。即使在页面刷新后，我也使用 jquery cookie 来保留视图状态。单击齿轮图标将切换侧边栏。脚本是：
$(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();
});
You can customize the layout/css to get what exactly you wanted to get.
您可以自定义布局/css 以获得您想要的内容。
回答by Bryan
I just accomplished what I think you want with jquery adding and removing the bootstrap classes. I have a button with id collapseand when clicked it checks if the sidebar is open or not and makes changes to the layout.
The Markup:
我刚刚通过 jquery 添加和删除引导类完成了我认为你想要的。我有一个带有 id 的按钮，collapse单击它时会检查侧边栏是否打开并对布局进行更改。标记：
<div class="container">
<div class="row">
<div class="row">
<div class="col-md-12"><button class="btn-primary btn-large btn" id="collapse">Collapse sidebar</button></div>
</div>
<div class="row">
<div class="col-md-8" id="content" style="height:400px;border:2px solid black">Hello, I'm a 3/4 width Div.</div>
<div class="col-md-4 open" id="sidebar" style="height:400px;border:2px solid blue">Hey There, I'm a 1/4 width Div</div>
</div>
</div>
</div>
The jQuery:
jQuery：
$('#collapse').click(function(){
if($('#sidebar').hasClass('open'))
{
$('#sidebar').removeClass('col-md-4');
$('#sidebar').removeClass('open');
$('#sidebar').addClass('hidden');
$('#content').addClass('col-md-12');
$('#content').removeClass('col-md-8');
}
else
{
$('#sidebar').addClass('col-md-4');
$('#sidebar').addClass('open');
$('#sidebar').removeClass('hidden');
$('#content').removeClass('col-md-12');
$('#content').addClass('col-md-8');
}
});
the only css i had was a hidden class .hidden{display:none;}and the fiddle.I used xs in the fiddle because of the small window. but works the same.
我唯一的 css 是一个隐藏的类.hidden{display:none;}和小提琴。由于小窗口，我在小提琴中使用了 xs 。但工作原理相同。
回答by Ranushka Goonesekere
I have used layouting plugin for 2 projects this helped me a lot it gives you full controls. my situation required both left, right and bottom also. link is,
我已经为 2 个项目使用了布局插件，这对我有很大帮助，它为您提供了完全控制。我的情况也需要左侧，右侧和底部。链接是，
i'v also using bootstrap3 and be wise when using bootstrap modle make shur to put that code on soon after body tag
我也使用 bootstrap3 并且在使用 bootstrap 模型时要明智，make shur 在 body 标记后立即放置该代码
happy coding.
快乐编码。
