无法切换响应式导航栏的列表项

Question

我无法切换列表视图。我究竟做错了什么？

html：

<nav>
    <span class="nav-btn"></span>
    <ul class="nav">
         <li>home</li>
         <li>about</li>
         <li>blog</li>
         <li>contact</li>
    </ul>
</nav>

css：

@media (max-width: 480px) {


    li {
        display: block;
        width: 480px;
        text-align: left;
        border: 1px solid black;
    }

    ul .nav{
        display: none;
    }
    .nav-btn:before {
        content: "Menu";
    }

    .nav-btn {
        display: block;
        background-color: yellow;
        font-size: 30px;
        text-align: center;
        cursor: pointer;
    }

脚本：

$(function () {
    "use strict";
    $('.nav-btn').on('click',
        function () {
            $('.nav').toggleClass('open');
        });
});

是否可以在javascript的帮助下完成此操作？

Answer 1

首先在spacing下方更改style，即不要在它们之间添加空格，

  ul.nav {
    display: none;
  }

第二次使用切换，并为类no styling声明open，所以添加它并且它可以正常工作。

$(function() {
  "use strict";
  $('.nav-btn').on('click', function() {
    $('.nav').toggle('open');
  });
});

  @media screen and (max-width: 640px){
  li {
    display: block;
    width: 480px;
    text-align: left;
    border: 1px solid black;
  }
  ul.nav {
    display: none;
  }
  .nav-btn:before {
    content: "Menu";
  }
  .nav-btn {
    display: block;
    background-color: yellow;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
  }
.open{
	display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <span class="nav-btn"></span>
  <ul class="nav">

    <li>home</li>

    <li>about</li>

    <li>blog</li>

    <li>contact</li>
  </ul>
</nav>

Answer 2

您正在添加课程＆＃39; open＆＃39;。但是没有CSS。

在CSS中尝试这个

.nav.open {
    display: block;
}