Question

我通过设计一个迷你网页来提高我的技能所以我启动了导航栏。

“模板”按钮应该改变视图并显示列表，但是当我点击它时什么也没有发生。

有人可以帮我吗？

代码：

html：

   <div class="menu-toggle">
            <h1 id="logo">PROTOCOL</h1>
            <li class="right table" id="table"><a class="list template" href="#template" >&#9776;</a></li>

            <span class="bar"></span>

            <span class="bar"></span>

            <span class="bar"></span>

        </div>




        <ul id="navigate" class="navigate">

            <li><a class="list home" href="#home"> Home</a></li>


            <li><a class="list" href="#conntacting">Contact us</a></li>





            <li class="right"><a class="list sign-up" href="#signing">Sign up</a></li>

            <li class="right"><a class="list" href="#logging">Log in</a></li>

        </ul>

    </nav>

CSS：我设计了当用户按下“模板”按钮时显示的导航栏并通过按相同的按钮再次隐藏它。

@media screen  and ( max-width : 675px){
.container{
    position: relative;
}
.menu-toggle{
    text-align: center;
    float: none;
    display: block;
    
}
.template{
    

    display: inline;
    float: right;
    padding: 0 40px;
    margin: auto;
    
}
li.table{
left: 80px;
height: 20px;
}
.nav{
    height: 90px;
}
.template:hover{
          display: inline;
    float: right;
    padding: 0 40px;  
    margin: auto;
}

.navigate,.active{
    text-align: center;
    display: grid;
    grid-template-columns: auto;
    background-color: #b00000; 
    margin: 0;
    width: 100%;
    position: absolute;
    top:90px;
    transition: all 0.5 ease;
    left: 100%;
    
}

li.right{
    display: table;
    padding: 0;
    
    
}
.menu-toggle.bar{
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
}

.active{
     text-align: center;
    display: grid;
    grid-template-columns: auto;
    background-color: #b00000; 
    margin: 0;
    width: 100%;
    position: absolute;
    top:90px;
    transition: all 0.5 ease;
    
}

}

JavaScript：我带来了按钮“模板”和“ul”的ids

var template = document.getElementById('template');
var nav = document.getElementById('navigate');
template.onclick = function () {
        if (nav.className === ('navigate')) {

           nav.className += 'active';
        } else {
            nav.className = 'navigate';
        };

Answer 1

您可以使用 classList.toggle 方法。

此外，为了整理东西，我删除了列表按钮，将菜单字体颜色更改为白色，并删除了类 navigate 和 active 上重复的 CSS：现在 .active只显示导航菜单。

（导航菜单在打开时宽度爆炸了，它破坏了菜单图标，所以我只是从中删除了 position: absolute; 和 width: 100%）

这里远未完成。尽量分步改变，多学习MDN上的css规则，而不是一次做很多事情。

var template = document.querySelector('.template');
var nav = document.querySelector('.navigate');

template.onclick = function() {
  nav.classList.toggle('active');
};

  @media screen and ( max-width: 675px) {
  .container {
    position: relative;
  }
  .menu-toggle {
    text-align: center;
    float: none;
    display: block;
  }
  .template {
    display: inline;
    float: right;
    padding: 0 40px;
    margin: auto;
  }
  li.table {
    left: 80px;
    height: 20px;
  }
  .nav {
    height: 90px;
  }
  .template:hover {
    display: inline;
    float: right;
    padding: 0 40px;
    margin: auto;
  }
  .navigate {
    text-align: center;
    display: none;
    background-color: #b00000;
    list-style: none;  
    margin: 0;
    left: 0;
    top: 90px;
    transition: all 0.5 ease;
  }
  a.list:not(.template) {
    text-decoration: none;
    color: white;
  }
  li.right {
    display: table;
    padding: 0;
  }
  .menu-toggle.bar {
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
  }
  .active {
    display: grid;
    grid-template-columns: auto;
  }

<div class="menu-toggle">
  <h1 id="logo">PROTOCOL</h1>
  <li class="right table" id="table"><a class="list template" href="#template">&#9776;</a></li>
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

<nav id="navigate">
  <ul class="navigate">
    <li><a class="list home" href="#home"> Home</a></li>
    <li><a class="list" href="#contacting">Contact us</a></li>
    <li class="right"><a class="list sign-up" href="#signing">Sign up</a></li>
    <li class="right"><a class="list" href="#logging">Log in</a></li>
  </ul>
</nav>

Answer 2

您的代码有很多错误，请创建具有模板类的按钮。但是我更新了您的 javascript 以供当前使用

template.onclick = function () {
   if (nav.className === 'navigate') {

       nav.classList.remove('navigate')
       nav.className = 'active';
    }
   else {
        nav.classList.remove('active')
        nav.className = 'navigate';
    }
  }
}

这个按钮问题有解决方案吗？

2 个答案: