使用显示的响应式导航栏:无仍然显示，即使它旨在显示何时使用媒体查询调整屏幕大小

responsive navbar using display:none still shows even it is meant to show when the screen resized using media query

本文关键字：显示 何时使 媒体 调整 屏幕 查询 导航 响应      更新时间：2023-09-26

我正在尝试修复我的响应式导航栏。 应该是，当屏幕大小变小时，导航将更改为"菜单"的单个按钮，单击时，它将垂直切换导航。 问题是，即使在全屏尺寸下，菜单仍然会显示。 这应该只在屏幕更改时出现。 谢谢 

    HTML:
   <div class="nav">
     <ul>
    <li ><a class="active" href="index.php"><a href="#">Home</a></li>
    <li ><a href="">About us</a>
      <ul>
        <li><a href="site_profile.php">Company Profile</a></li>
        <li><a href="#">Management</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Services</a></li>
      </ul>
    </li>
    <li ><a href="#">Contacts</a></li>
    <li ><a href="">Careers</a></li>
    <li ><a href="#">Blog</a>
      <ul>
        <li><a href="#">Tips</a></li>
        <li><a href="#">Success Story</a></li>
      </ul>
    </li>
      <li class="contact"><a href="#">Login</a></li>
  </ul>
  <div class="handle"> Menu </div>
</div>
  CSS:
.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0; 
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}
.nav a {
 text-decoration: none;
 color: #fff;
 display: block;
 padding-left: 15px;
 border-bottom: 1px solid #888;
 transition: .3s background-color;
}
.nav a:hover {
  background-color: #005f5f;
}
.nav a.active {
 background-color: #aaa;
 color: #444;
 cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
 }
/*******************************************
 MEDIA
********************************************/
.handle.hidden {
 width: 100%;
 background: white;
 text-align: left;
 box-sizing: border-box;
 padding: 15px 10px;
 cursor: pointer;
 color: white;
 display: none;
 }  
 @media screen and (min-width: 650px) {
.nav li {
 width: 130px;
 border-bottom: none;
 height: 50px;
 line-height: 50px;
 font-size: 1.4em;
 display: inline-block;
 margin-right: -4px;
   }
.showing { max-height: 20em; }
 .nav a {
  border-bottom: none;
  }
 .nav > ul > li {
  text-align: center;
  }
  .nav > ul > li > a {
  padding-left: 0;
  }
  /* Sub Menus */
  .nav li ul {
  position: absolute;
  display: none;
  width: inherit;
  }
 .nav li:hover ul {
 display: block;
  }
 .nav li ul li {
 display: block;
 }
.handle{
    display: block;
    background-color: rgba(0,0,0,0.8);
 }
 }
 SCRIPT:
  <script type="text/javascript">
    $('.handle').on('click', function(){
        $('nav ul').toggleClass('showing');
    });
   </script>

使用您当前的代码，您需要将类.hidden动态添加到 .menu html 元素中，这不是很方便，但有一种更简单的方法可以使菜单消失。试试：

.handle { /* now we don't use the .hidden class */
      width: 100%;
      background: white;
      text-align: left;
      box-sizing: border-box;
      padding: 15px 10px;
      cursor: pointer;
      color: white;
      display: block;
 }  
...
/* inside media query */
 @media screen and (min-width: 650px) {
   .handle {
       display: none; /* this hides the menu on bigger screens */
       background-color: rgba(0,0,0,0.8);
    }
 }

相关文章：