javascript - W3 响应式导航栏不适用于我的应用程序

Question

出于某种原因，来自 W3 的用于设置响应式导航栏的起始代码不适用于我的网站。我正在尝试关注 https://www.w3schools.com/howto/howto_js_topnav_responsive.asp .我的导航栏结构与他们的有点不同。我的有 nav 标签、ul 和 li 标签。我认为这与我在 DOM 中的导航方式有关，但我无法理解。任何帮助将不胜感激。

我已经尝试将媒体查询更改为 .topnav ul li a 而不仅仅是 .topnav a 但这也不起作用。

        <div id="header">
            <div id="logo">
                <img id="logo" src="your-choice-logo.jpg">
            </div>
            <nav class="topnav" id="myTopNav">    
                <ul>
                    <li><a class="active" href="#welcome-section">Home</a></li>
                    <li><a href="#scheduling">Make Appointment</a></li>
                    <li><a href="#contact-us">Contact Us</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#reviews">Reviews</li></a></li> 
                    <li><a href="#areas-served">Areas Served</a></li>
                    <li><a href="#facebook">Facebook</a></li>
                    <li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
                        <i class="fa fa-bars"></i></li>
                    </a>
                </ul>
            </nav>
        </div>


/* When the screen is less than 600 pixels wide, hide all links, 
except for the first one ("Home"). Show the link that contains 
should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav ul li a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  /* The "responsive" class is added to the topnav with JavaScript 
when the user clicks on the icon. This class makes the topnav look 
good on small screens (display the links vertically instead of 
horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive ul li a {
      float: none;
      display: block;
      text-align: left;
    }
  }

  /* Hide the link that should open and close the topnav on small 
screens */
.topnav .icon {
    display: none;
}

/* Toggle between adding and removing the "responsive" class to 
topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }

Answer 1

这里有几个问题。

• 您的 html 标签有问题(其中一些在嵌套标签关闭之前关闭)。

• 对于某些样式，您应该使用 li(显示/位置/ float )，而对于某些 a(视觉样式)，如 li 并排放置，而 a 位于 li 内，技术上不能是 :not(:first-child) 例如。

• 对此类列表使用 ul，您应该使用 style-list: none; 重置其样式； margin :0；填充:0。

• 您在 JS 和 HTML 中有不同的 id(HTML 中的属性值和 JS 中的几乎所有内容都区分大小写)。

查看下面的修复版本。

/* Toggle between adding and removing the "responsive" class to 
topnav when the user clicks on the icon */
function myFunction() {
  var x = document.getElementById("myTopNav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

/* When the screen is less than 600 pixels wide, hide all links, 
except for the first one ("Home"). Show the link that contains 
should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {
  .topnav ul li:not(:first-child) {
    display: none;
  }
  .topnav ul li.icon {
    float: right;
    display: block;
  }
}


/* The "responsive" class is added to the topnav with JavaScript 
when the user clicks on the icon. This class makes the topnav look 
good on small screens (display the links vertically instead of 
horizontally) */

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


/* Hide the link that should open and close the topnav on small 
screens */

.topnav .icon {
  display: none;
}


/* BASIC STYLES */


/* Add a black background color to the top navigation */

.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */

.topnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.topnav li {
  float: left;
}

.topnav li a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */

.topnav li:hover {
  background-color: #ddd;
  color: black;
}


/* Add an active class to highlight the current page */

.active {
  background-color: #4CAF50;
  color: white;
}


/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
  display: none;
}

<div id="header">
  <div id="logo">
    <img id="logo" src="your-choice-logo.jpg">
  </div>
  <nav class="topnav" id="myTopNav">
    <ul>
      <li><a class="active" href="#welcome-section">Home</a></li>
      <li><a href="#scheduling">Make Appointment</a></li>
      <li><a href="#contact-us">Contact Us</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#reviews">Reviews</a></li>
      <li><a href="#areas-served">Areas Served</a></li>
      <li><a href="#facebook">Facebook</a></li>
      <li class="icon">
        <a href="javascript:void(0);" onclick="myFunction()">
          <i class="fa fa-bars">=</i></a>
      </li>
    </ul>
  </nav>
</div>

顺便说一句，w3schools 与 W3 联盟没有任何关系。您不应将 w3schools 视为权威资源。但是它包含一些简单易用的教程。