如何使頁面加載到引導時隱藏邊欄？

這是我的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

如何使頁面加載到引導時隱藏邊欄？

回答

相關問題