如何在用户点击栏图标时隐藏/显示导航栏？

当用户点击“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

如何在用户点击栏图标时隐藏/显示导航栏？

回答

相关问题