Javascript 如何在引导中加载页面时隐藏侧边栏？

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

当页面加载时，是否可以在默认情况下将其隐藏？（问题1）

同样，如果它能工作，那么显示/隐藏侧边栏在桌面上也能正常工作，但是如果我们最小化浏览器窗口，它就会变得相反，比如，当它被隐藏时，隐藏侧边栏显示，当它被显示时，显示侧边栏显示

我用来隐藏/显示侧栏的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;
        }
    });
});

var f=1；//显示隐藏，因为默认情况下它是显示的。
$（文档）.ready（函数（）{
$（“#菜单切换”）。单击（函数（）{
如果（f==0）
{
$（“#菜单切换”）.html（“显示类别”）；
f=1；
}
其他的
{
$（“#菜单切换”）.html（“隐藏类别”）；
f=0；
}
});
});

---

是否有可能知道我是在手机上还是在桌面上，以便我可以相应地初始化f的值？（问题2）

在

$（文档）中再添加一行。准备好
触发
点击
页面加载上的
事件，如下所示：

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

对于第二个问题，如果您
搜索，如一个和

使用切换将比单击更方便，如果你想在页面加载时将其隐藏，请先在html中设置display none（简单方式）

$（文档）.ready（函数（）{
$（“#菜单切换”）.toggle（函数（）{
if（$（this.css（'display'）='none'）
{
$（“#菜单切换”）.html（“隐藏类别”）；//这是隐藏
}
其他的
{
$（“#菜单切换”）.html（“显示类别”）；//这是显示
}
});
});
我会通过媒体查询完全做到这一点。制作两个不同的
#菜单切换
，并在cssThanks中分别显示/隐藏每个选项。对于解决方案，它是有效的，但问题是，当我在移动设备上查看此网站时，我所有内容上方的黑色区域仍然存在，知道为什么会存在吗？（请从您的移动设备查看网站，以了解问题。@BaqirKhan您正在切换整个
div-#wrapper
，其中包含全身内容。尝试将侧边栏和身体其余部分的关注点分离。好的，我按照您说的做了，#wrapper有侧菜单，其余的身体被分离，但现在当菜单被切换到打开时重叠正文的内容。您只是在做
左填充
和
隐藏
和
显示
元素右？还要为
包装显示添加一个属性：无
无问题..没有给出完美解决方案的正确想法..抱歉..编码愉快...）
$(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
    }
 });
 });