非引導可摺疊導航欄

我試圖建立我的代碼，這樣，當我點擊了「#toggleNav」非引導可摺疊導航欄

<a href="#" id="toggleNav"><i class="fa fa-bars"></i></a>

它將添加或刪除「.hidden」的ID的鏈接類元素的以「#nav」

<ul class="navbar navCollapse" id="nav"> 
     <span class="links"> 
     <a href="#"> 
      <li>Home</li> 
     </a> 
    ...

「.hidden」類的ID：

*.hidden { 
     display: none; 
    }

因此，它將充當導航欄上的切換按鈕，但由於我只有在屏幕大小小於600像素的情況下才有此選項，因此如果屏幕大小爲599像素或更少，我希望它默認爲.hidden，並且默認只有在尺寸爲600px或更大時才顯示。

如果有一個更簡單的方法來做到這一點，或者我需要一個插件，我會很感激任何幫助。

我不想使用任何引導程序或其他框架 - 最好只是CSS或JavaScript，也許jQuery。

謝謝！

來源

2015-10-10 Jndachenhaus

您可以通過CSS媒體查詢做到這一點，就像這樣：

@media (max-width: 600px) { 
    *.smhidden { 
    display: none; 
    } 
}

這個類添加到您的元素，這樣即使.hidden類走了，如果屏幕尺寸小於600時， .smhidden類仍將隱藏該元素。

編輯

您可以通過設置通過JavaScript的默認值：

var windowWidth = window.innerWidth; 
if (windowWidth < 600) { 
    $('#nav').addClass('hidden'); 
}

來源

2015-10-10 23:31:07

但是如何使用按鈕來切換部分？感謝您解決屏幕尺寸問題:) – Jndachenhaus

哦，對不起，我部分誤讀了這個問題。我認爲如果屏幕尺寸很小，它會默認爲不顯示。我將編輯答案以包含正確的解決方案。 –

我只是找到了一種方式，但如果你的編輯更簡單，那麼謝謝，如果不是的話 - 它的確定和謝謝你嘗試 – Jndachenhaus

我只是找到了一個辦法做到這一點，但我寧可不使用兩個單獨的按鈕。

<span class="float-right"> 
     <a href="#" id="toggleNavShow"><i class="fa fa-bars"></i></a> 
     <a href="#" id="toggleNavHide" class="hidden"><i class="fa 
     fa-bars"></i></a> 
    </span>

而且重複JS ...

$(document).ready(function(){ 
     $("#toggleNavShow").click(function(){ 
     $("#nav").show(); 
     $("#toggleNavShow").hide(); 
     $("#toggleNavHide").show(); 
     }); 
     $("#toggleNavHide").click(function(){ 
     $("#nav").hide(); 
     $("#toggleNavShow").show(); 
     $("#toggleNavHide").hide(); 
     }); 
    });

如果有一種方法只使用一個按鈕，我很想知道...我不是所有與JS經歷。

來源

2015-10-10 23:38:58 Jndachenhaus

非引導可摺疊導航欄

回答

相關問題