Question

当用户点击“条形图标”时，如何隐藏导航栏？

我想创建一个以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效果（至少目前为止）。如果我没有提供足够的信息，请告诉我，以便我能提供解决此问题所需的适当信息。

Answer 1

以下是如何使用简单的节目控制它并使用基本的javascript隐藏：

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

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

https://jsfiddle.net/7xo87kz6/

Answer 2

您可以将jQuery用于此目的。确保在项目中包含jQuery。

Jquery Part

＆＃13;

<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>

＆＃13;

HTML部分

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

我不是100％理解你的问题，但你可以使用这样的东西，

＆＃13;

//JS

var button = document.querySelector("button");
var body = document.querySelector("body");


button.addEventListener("click",function() {
  body.style.background = "red";
});

＆＃13;

基本上它使用addEventListener在点击上运行一个函数。并且您可以添加if语句来测试css属性

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

3 个答案: