如何使用 Twitter 的引导程序创建可折叠的侧边栏 [英] How do you create a collapsable sidebar using Twitter's bootstrap

问题描述

我一直在尝试创建一个侧边栏，它可以使用 Twitter 的 Bootstrap 项目展开和折叠，但我无法让它工作.我正在尝试使用他们的基本容器流体布局作为起点.我什至无法正确隐藏侧边栏并将内容"区域扩展到屏幕的整个宽度.相反，侧边栏文本将消失，但内容区域不会扩展.我改变了侧边栏和内容的宽度，但我似乎无法改变它.感谢您对此的任何帮助.

I have been trying to create a sidebar that will expand and collapse using Twitter's Bootstrap project but I am not able to get it working. I am trying to use their basic container-fluid layout as a starting point. I am not able to even hide the sidebar properly and expand the "content" area to the full width of the screen. Instead, the sidebar text will disappear but the content area will not expand. I have changing the width of the sidebar and content but I cannot seem to alter it. Thanks for any help with this.

我也一直在查看这里

推荐答案

这很容易实现... 请看下面的 Fiddle..

这是它的要点，不过……基本上，侧边栏会在鼠标不活动一秒后隐藏.您将主块的 content(有侧边栏)和 container-fluid(无侧边栏)换掉，并隐藏侧边栏.就这么简单.

This is the gist of it, though… Basically, the sidebar get's hidden after one second of inactivity with the mouse. You swap out the content (has sidebar) and container-fluid (no sidebar) for your main block, and hide the sidebar. Easy as that.

function onInactive(ms, cb){ 
    var wait = setTimeout(cb, ms); 
    document.onmousemove = document.mousedown =
    document.mouseup = document.onkeydown = 
    document.onkeyup = document.focus = 
    function(){
        clearTimeout(wait);
        wait = setTimeout(cb, ms);
}; }
var sidebar = $('div.sidebar'); 
var content = $('div.content');
$('body').live('mousemove', function(event) {
    sidebar.addClass('sidebar').fadeIn();
    content.addClass('content').removeClass('container-fluid');
});

onInactive(1000, function(){
    sidebar.fadeOut(300);
    content.removeClass('content').addClass('container-fluid');
});

这篇关于如何使用 Twitter 的引导程序创建可折叠的侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！