如何使页面加载到引导时隐藏边栏？

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

当页面加载时，默认情况下可以隐藏它吗？（问题1）

此外，如果它工作，则显示/隐藏边栏在桌面上工作正常，但如果我们最小化浏览器窗口，它将变成相反的，就像隐藏时显示的是HIDE SIDEBAR，显示出SHOW 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）

来源

2015-10-14 Baqir Khan

我会完全做到这一点与媒体查询。制作两个'＃menu-toggle'变种并分别在css中显示/隐藏每一个 – Alex

在$(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

来源

2015-10-14 07:54:16

感谢这个解决方案，它可以工作，但是当我在移动设备上查看这个网站时，那个问题仍然存在，任何想法为什么在那里？（请从您的移动设备查看[this]（http://clickdesti.netne.net/）网站以获取问题。 –

@BaqirKhan您正在切换整个'div - ＃wrapper'，其中包含全身内容。尝试分离边栏和身体的其余部分的关注.. –

好的，我做了你说的，#wrapper有侧面菜单和休息体分离，但现在当菜单切换..重叠身体的内容。 –

使用切换会比点击更方便，如果u希望把它隐藏在页面加载，在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 
    } 
}); 
});

来源

2015-10-14 09:22:57

如何使页面加载到引导时隐藏边栏？

回答

相关问题