MST

星途 面试题库

面试题：JavaScript中如何结合CSS媒体查询实现简单响应式导航栏切换

假设已有一个HTML的导航栏结构，通过JavaScript结合CSS媒体查询，实现在屏幕宽度小于600px时，将导航栏从水平排列切换为垂直排列，并通过点击按钮显示隐藏菜单，描述实现思路并给出关键代码示例。
31.2万 热度难度
编程语言JavaScript

知识考点

AI 面试

面试题答案

一键面试

实现思路

  1. 媒体查询：使用CSS媒体查询，当屏幕宽度小于600px时，设置导航栏为垂直排列。
  2. JavaScript操作：通过JavaScript获取按钮元素和导航栏元素，为按钮添加点击事件，在点击时切换导航栏的显示或隐藏状态。

关键代码示例

  1. HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Responsive Navbar</title>
</head>
<body>
    <button id="menuButton">菜单</button>
    <nav id="navbar">
        <a href="#">首页</a>
        <a href="#">关于</a>
        <a href="#">服务</a>
        <a href="#">联系</a>
    </nav>
    <script src="script.js"></script>
</body>
</html>
  1. CSS部分（styles.css）
nav {
    display: flex;
    justify-content: space-around;
}

@media (max-width: 600px) {
    nav {
        flex-direction: column;
        display: none;
    }
}
  1. JavaScript部分（script.js）
const menuButton = document.getElementById('menuButton');
const navbar = document.getElementById('navbar');

menuButton.addEventListener('click', () => {
    if (navbar.style.display === 'none' || navbar.style.display === '') {
        navbar.style.display = 'flex';
    } else {
        navbar.style.display = 'none';
    }
});