Question

当我调整屏幕大小时，条形图标不会出现在屏幕上，而ul也消失了，所以我在codepen中运行它，但它不起作用问题出在哪里？是在javascript中吗，我以前从未用过这种语言

@media (max-width: 960px){
  .toggle{
    display: block;
  }
  ul{
    width: 100%;
    display: none;
  }
  ul li{
    display: block;
    text-align: center;
  }
  .active{
    display: block;
  }
}

  <nav>
    <ul>
      <div class="toggle">
        <div class="menu"><i class="fas fa-bars"></i></div>
      </div>
      
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
  $('.menu').click(function(){
    
    $('ul').toggleClass('active');
    
  })
 })
  </script>
</body>

Answer 1

您有此代码

<div class="toggle">
      <div class="menu"><i class="fas fa-bars"></i></div>
    </div>

在内，该元素已被display：none隐藏在CSS中。从中删除该代码，它应该可以工作。

@media (max-width: 960px){
  .toggle{
    display: block;
  }
  ul{
    width: 100%;
    display: none;
  }
  ul li{
    display: block;
    text-align: center;
  }
  .active{
    display: block;
  }
  .menu{
    width:20px;
    height:20px;
    background-color:red;
  }
}

  <nav>
    <div class="toggle">
      <div class="menu"><i class="fas fa-bars"></i></div>
    </div>
    <ul>          
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
  $('.menu').click(function(){
    
    $('ul').toggleClass('active');
    
  })
 })
  </script>
</body>

编辑：我添加了一些代码以使菜单可见。没有出现图标不是您提供的任何代码的问题，而是其他一些问题。我认为您不是要导入库之类的东西。

响应式导航栏不出现

1 个答案: