当页面在引导程序中加载时如何隐藏侧边栏？答案

【问题标题】：How to make Sidebar Hidden when page loads up in bootstrap?当页面在引导程序中加载时如何隐藏侧边栏？
【发布时间】：2015-10-14 07:22:17
【问题描述】：

这是我的website。它有一个顶部菜单和一个侧边栏菜单。当页面加载时，侧边栏默认是可见的。桌面版没有问题，但在移动设备上查看时，侧栏位于网站内容上方，无法将其删除，因为显示/隐藏它的切换按钮位于顶部菜单中。

是否可以在页面加载时默认隐藏？（问题一）

另外，如果它可以工作，那么显示/隐藏侧边栏在桌面上工作正常，但是如果我们最小化浏览器窗口，它就会变成相反的，比如，当它隐藏时，显示隐藏侧边栏，当它显示时，显示显示边栏。

我用来隐藏/显示侧边栏的jquery代码是：

 var f=1; // to displayd HIDE, since by default its shown.
 $(document).ready(function(){
    $("#menu-toggle").click(function(){
    if (f==0)
        {
            $("#menu-toggle").html("<b>Show Categories</b>");
            f=1;
        }
    else
        {
            $("#menu-toggle").html("<b>Hide Categories</b>");
            f=0;
        }
    });
});

是否可以知道我是在移动设备还是桌面设备上，以便我可以相应地初始化 f 的值？（问题2）

【问题讨论】：

我会完全用媒体查询来做到这一点。制作#menu-toggle 的两个变体，并分别在css中显示/隐藏每个变体

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

在$(document).ready 中向trigger click 事件中添加一行page load，如下所示：

$(document).ready(function(){
    //Event code start here
       ....
    //Event code end here
    $("#menu-toggle").trigger('click') //trigger its click
});

对于您的第二个问题，您将获得很多 javascript 解决方案，如果您搜索，例如 here 和 another here

【讨论】：

感谢您的解决方案，它有效，但是那个问题，当我在移动设备上查看这个网站时，我所有内容之上的黑色区域仍然存在，知道为什么会在那里吗？（请在您的移动设备上查看this网站以解决问题。
@BaqirKhan 您正在切换整个div - #wrapper，它涵盖了其中的整个身体内容..尝试分离侧边栏和身体剩余部分的关注点..
好的，我照你说的做了，#wrapper 有侧边菜单，其余部分是分开的，但是现在打开菜单时，它会与正文的内容重叠。
你只是在做 padding-left 和 hiding 和 showing 元素对吗？还要向#wrapper display:none添加一个属性
没有问题.. 没有得到正确的想法来提供完美的解决方案.. 抱歉.. 快乐编码.. :)

【解决方案2】：

使用切换会比点击方便，如果你想在页面加载时隐藏它，请在html中设置先不显示（简单方式）

$(document).ready(function(){
 $("#menu-toggle").toggle(function(){
     if($(this).css('display') === 'none')
    {
        $("#menu-toggle").html("<b>Hide Categories</b>"); //this is hide
    }
 else
    {
        $("#menu-toggle").html("<b>Show Categories</b>"); //this is show
    }
 });
 });

【讨论】：