Question

由于某些原因，W3中用于设置响应式导航栏的启动器代码不适用于我的网站。我正在尝试关注https://www.w3schools.com/howto/howto_js_topnav_responsive.asp。我的导航栏的结构与他们的导航栏略有不同。我的有nav标签，ul和li标签。我认为这与导航DOM有关，但我只是无法获得它。任何帮助将不胜感激。

我已经尝试将媒体查询更改为.topnav ul li而不是.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标记时遇到了问题（其中有些在关闭嵌套标记之前就已关闭）。
对于某些样式，应使用L1（显示/位置/浮动），而对于某些li（视觉样式），应将a并排放置，而li位于a内，并且从技术上讲，不能设为li。
对此类列表使用:not(:first-child)，您应使用ul重置其样式。
您在JS和HTML中具有不同的ID（HTML中的属性值以及JS中的几乎所有内容都区分大小写）。

查看下面的固定版本。

style-list: none; margin: 0; padding: 0

/* 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;
}

顺便说一句，w3schools与W3财团无关。您不应将w3schools视为权威资源。但是，它包含一些简单易用的教程。

W3自适应导航栏不适用于我的应用程序

1 个答案: