Question

点击菜单按钮，class="responsive"中的display:block按钮后，我想为导航菜单添加#menu-btn。我在控制台中看到该类已加入，但我的SCSS中可能有一个错误的选择器。点击后没有任何反应。

＆＃13;

$(document).ready(function(){

    $('#btn-mobile').on('click',function(){
      if($('#nav-top').hasClass('responsive')){
        $('#nav-top').removeClass('responsive')
        console.log('resp yes')
      }else{
        $('#nav-top').addClass('responsive')
        console.log('resp no')
      }
    });
});

＆＃13;

#nav-top{
  background-color: rgb(48, 48, 48);
  width: 100%;
  //min-height: 95px;
  min-width: 240px;
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 2;
  #logo{
    font-size: 47.644px;
    font-family: "OleoScript-regular";
    color: rgb(255, 255, 255);
    margin: 20px 0;
  }  
  #menu-btn{
    font-size: 12px;
    font-family: "Raleway";
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    text-align: center;
    ul{
      margin: 0;
      padding: 0;
      li{
        padding:20px;
        list-style: none;
        display: inline-block;
        padding: 10px;
        background-color: rgb(48, 48, 48);
        border-bottom: 3px solid transparent;
        //cursor:pointer;
        a{
          text-decoration: none;
          color: rgb(255, 255, 255);
          width: 100%;
        }
        &:hover{
          a{
            border-bottom: 3px solid rgb(123, 108, 99);
          }
        }
      }
    }        
  }
  #top-menu-cursor{
    display: none;
    #btn-mobile{
      background:transparent;
      border:none;
      #btn-bar{
        width: 30px;
        height: 5px;
        background: rgb(255, 255, 255);
        margin: 5px 0;
        border-radius: 2px;
      }
    }
  }
}
@media screen and (max-width: 700px){

  #nav-top{
    display: inline-block;
    #logo{
      display: inline-block;
      font-size: 40px;
    }
    #menu-btn{
      display: none;
    }
    #top-menu-cursor{
      display: flex;
      align-items: center;
      margin: 20px 0;
      float: right;
    }
  }
    .responsive{
      #menu-btn{
      display: block;
      li{
        height:50px;
        width:100%;
        }
      }  
    }  
}

＆＃13;

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>navbar responsive</title>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<header>
  <div id="bg-header-img">
      <div class="container" id="nav-top">
        <h1 class="col-md-offset-2 col-md-2" id="logo">Mairala</h1>
        <div id="top-menu-cursor">
          <button id="btn-mobile">
            <div id="btn-bar"></div>
            <div id="btn-bar"></div>
            <div id="btn-bar"></div>
          </button>
        </div>
        <div class="col-md-offset-2 col-md-6" id="menu-btn">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolios</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
  </div>
</header>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

</body>
</html>

＆＃13;

Answer 1

在媒体查询中，您有：

#nav-top #menu-btn { display: none; }

和

.responsive #menu-btn { display: block; }

1s具有更高的特异性，第二个，所以它仍然是隐藏的。你需要提高第二个的特异性才能使其发挥作用。

@media screen and (max-width: 700px){
  #nav-top{
    display: inline-block;
    #logo{
      display: inline-block;
      font-size: 40px;
    }
    #menu-btn{
      display: none;
    }
    #top-menu-cursor{
      display: flex;
      align-items: center;
      margin: 20px 0;
      float: right;
    }
    &.responsive{ //a couple of changes here
      #menu-btn{
      display: block;
      li{
        height:50px;
        width:100%;
        }
      }  
    }  
  }
}

将响应式自定义类添加到移动菜单

1 个答案: