如何在用戶點擊欄圖標時隱藏/顯示導航欄？

當用戶點擊「bar-icon」時，如何隱藏我的導航欄？如何在用戶點擊欄圖標時隱藏/顯示導航欄？

我想創造出開始hidden一個導航欄，並在用戶點擊該欄圖標，導航欄displays

。你能用JavaScript這麼做嗎？或者你需要jQuery嗎？

HTML

<div class="banner"> 
    <header class="header"> 
     <i class="fa fa-bars"></i> 
     <nav class="nav"> 
     </nav> 
    </header> 
    <div class="bannerContainer"> 
     <h1>Heading 1</h1> 
    </div> 
</div>

nav { 
 
    height: 60px; 
 
    width: 100%; 
 
    background-color: #ccc; 
 
}

<div class="banner"> 
 
    <header class="header"> 
 
     <i class="fa fa-bars"></i> 
 
     <nav class="nav"> 
 
     </nav> 
 
    </header> 
 
    <div class="bannerContainer"> 
 
     <h1>Display like that above!</h1> 
 
    </div> 
 
</div>

我只是想弄清楚如何我可以隱藏導航欄，所以沒有花哨好看的3D效果將顯示在需要的時候，（對於現在至少）。如果我沒有提供足夠的信息，請告訴我，以便我可以提供解決此問題所需的適量信息。

來源

2016-01-25 James Snowy

Jquery是最簡單的方法。 –

你甚至可以用純CSS做到這一點，沒有JavaScript：http://www.sitepoint.com/pure-css-off-screen-navigation-menu/ – cuddlecheek

你的問題是什麼排除了一個純CSS的解決方案？ – krillgar

這裏是如何控制一個簡單的表演，並與基本的JavaScript隱藏：

function openMenu(e){ 
    document.getElementById('menu').style.display = 'block'; 
} 

function closeMenu(e){ 
    document.getElementById('menu').style.display = 'none'; 
}

https://jsfiddle.net/7xo87kz6/

來源

2016-01-25 19:07:34 Nate

您可以使用jQuery用於此目的。確保在您的項目中包含jQuery。

jQuery的部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("#bar").click(function(){ 
 
     $(".bannerContainer").toggle(); 
 
    }); 
 
}); 
 
</script>

HTML部分

nav { 
 
    height: 60px; 
 
    width: 100%; 
 
    background-color: #ccc; 
 
}

<div class="banner"> 
 
    <div id = "bar"> 
 
     <i class="fa fa-bars"></i> 
 
     <nav class="nav"> 
 
     </nav> 
 
    </div> 
 
</div> 
 
    
 
    <div class="bannerContainer"> 
 
     <h1>Display like that above!</h1> 
 
    </div>

來源

2016-01-25 19:18:12 Rico

我不100％理解你的問題，但是，你可以使用這樣的事情，

//JS 
 

 
var button = document.querySelector("button"); 
 
var body = document.querySelector("body"); 
 

 

 
button.addEventListener("click",function() { 
 
    body.style.background = "red"; 
 
});

<!--HTML--> 
 
<button>Try Me!</button>

基本上它使用的addEventListener上運行一個點擊的功能。並且你可以添加if語句來測試css屬性

來源

2016-01-25 19:37:10 user4875875

如何在用戶點擊欄圖標時隱藏/顯示導航欄？

回答

相關問題