jquery - 为什么我的响应式菜单在宽度调整大小/更改时没有显示？

Question

一旦宽度发生变化或调整页面大小，导航列表项就不会显示。

有一个 Codepen here代码如下

    <nav class="isotope-filters nav">
        <ul>
            <li class="info">Infomation</li>
            <li>Filter:</li>
            <li><a class="selected" data-filter="*">Show All</a></li>
            <li><a data-filter=".ads">One</a></li>
            <li><a data-filter=".des">Two</a></li>
            <li><a data-filter=".art">Three</a></li>
            <li><a href="http://mrthomason.tumblr.com">Four</a>
            </li>
            <li class="filter">
                <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">Filter</a>
            </li>
        </ul>
    </nav>

CSS

body {
    font: bold 16px/21px helvetica, arial, sans-serif;
    letter-spacing: 1px;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    min-height: 100%;
}



nav {
    float: right;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
    padding-right: 15px;
    font-size: 14px;
}

.info:hover {
    border-bottom: 2px solid;
    padding-bottom: 3px;
    cursor: pointer
}



a {
    display: inline-block;
    position: relative;
    text-decoration: none;
    cursor: pointer
}

li:nth-child(1) {
    padding-right: 0;
}

li:nth-child(2) {
    color: darkgray;
    padding-right: 10px;
    padding-left: 15px;
}

li a:hover {
    border-bottom: 2px solid;
    padding-bottom: 3px;
}

nav.isotope-filters ul li a:active,
nav.isotope-filters ul li a.selected {
    border-bottom: 2px solid;
    padding-bottom: 4px;
}

.filter {display: none;}


@media screen and (max-width:680px) {

   .nav ul li:not(:first-child) {display: none;}
    .nav ul li.filter {display: inline-block; padding-left: 15px;}    
}

@media screen and (max-width:680px) {
  .nav ul.responsive {position: relative;}
  .nav ul.responsive li.filter {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav ul.responsive li {
    float: none;
    display: inline;
  }
   .nav ul.responsive li  {
    display: block;
    text-align: left;
  }
}

然后我使用下面的脚本:

function myFunction() {
        document.getElementsByClassName("nav")[0].classList.toggle("responsive");
    }

控制台日志没有显示任何错误。

因此，它隐藏列表项，显示“过滤器”，但不显示隐藏的列表项，就像它应该做的那样。

Answer 1

将此 id 添加到您的 nav - id="respnav" - 然后更改您的 JavaScript 代码:

 function myFunction() {
    var d = document.getElementById("respnav");
    d.className += "responsive";
} 

这将获取 nav 元素并向其添加 responsive 类。它在这里工作正常:See the codepen

和一个小视口(viewport)的图像