javascript - 如何在 Bootstrap 中加载页面时隐藏侧边栏？

Question

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

是否可以在页面加载时将其默认隐藏？ (问题1)

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

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

Answer 1

在$(document).ready中再添加一行以在页面加载上触发点击事件，如下所示:

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

For your 2nd problem you will get lot of javascript solutions if you search, like one here and another here