类的操作
类CSS修改
方式一：
box.style.width ="300px";通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，这样的执行的性能是比较差，而且这种形式当我们要修改多个样式时，也不太方便
方式二：
box.className += " b2";我们可以通过修改元素的class属性来简介的修改样式，这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器渲染页面一次，性能比较好，并且这种方式，可以让表现和行为进一步分离。
方式三：提取方法
//定义一个函数，用来向一个元素中添加指定的class属性值 /* * 参数: * obj 要添加class属性的元素 * cn 要添加的class值 * */ function addClass(obj , cn){ //检查obj中是否含有cn if(!hasClass(obj , cn)){ obj.className += " "+cn; } } /* * 判断一个元素中是否含有指定的class属性值 * 如果有该class，则返回true，没有则返回false * */ function hasClass(obj , cn){ //判断obj中有没有cn class //创建一个正则表达式 //var reg = /\bb2\b/; var reg = new RegExp("\\b"+cn+"\\b"); return reg.test(obj.className); } /* * 删除一个元素中的指定的class属性 */ function removeClass(obj , cn){ //创建一个正则表达式 var reg = new RegExp("\\b"+cn+"\\b"); //删除class obj.className = obj.className.replace(reg , ""); } /* * toggleClass可以用来切换一个类 * 如果元素中具有该类，则删除 * 如果元素中没有该类，则添加 */ function toggleClass(obj , cn){ //判断obj中是否含有cn if(hasClass(obj , cn)){ //有，则删除 removeClass(obj , cn); }else{ //没有，则添加 addClass(obj , cn); } }二级菜单-完成基本功能
鼠标悬停式的二级菜单
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鼠标悬停式二级菜单</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; } body { font-family: "Microsoft Yahei", sans-serif; background-color: #f5f5f5; } /* 导航栏容器 */ .nav { width: 100%; background-color: #333; } /* 一级菜单列表 */ .nav > ul { display: flex; justify-content: center; width: 1200px; margin: 0 auto; } /* 一级菜单项 */ .nav-item { position: relative; padding: 0 20px; height: 50px; line-height: 50px; } .nav-item > a { color: #fff; font-size: 16px; display: block; transition: color 0.3s; } .nav-item:hover > a { color: #409eff; } /* 二级菜单容器 */ .submenu { position: absolute; top: 50px; left: 0; width: 150px; background-color: #fff; border: 1px solid #eee; border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 默认隐藏二级菜单 */ display: none; z-index: 999; } /* 二级菜单项 */ .submenu-item { padding: 0 15px; height: 40px; line-height: 40px; } .submenu-item a { color: #333; font-size: 14px; display: block; transition: background-color 0.3s, color 0.3s; } .submenu-item a:hover { background-color: #409eff; color: #fff; } /* 悬停一级菜单时显示二级菜单 */ .nav-item:hover .submenu { display: block; } </style> </head> <body> <nav class="nav"> <ul> <li class="nav-item"> <a href="#">首页</a> </li> <li class="nav-item"> <a href="#">产品中心</a> <!-- 二级菜单 --> <ul class="submenu"> <li class="submenu-item"><a href="#">产品1</a></li> <li class="submenu-item"><a href="#">产品2</a></li> <li class="submenu-item"><a href="#">产品3</a></li> </ul> </li> <li class="nav-item"> <a href="#">解决方案</a> <!-- 二级菜单 --> <ul class="submenu"> <li class="submenu-item"><a href="#">方案1</a></li> <li class="submenu-item"><a href="#">方案2</a></li> <li class="submenu-item"><a href="#">方案3</a></li> <li class="submenu-item"><a href="#">方案4</a></li> </ul> </li> <li class="nav-item"> <a href="#">关于我们</a> <!-- 二级菜单 --> <ul class="submenu"> <li class="submenu-item"><a href="#">公司简介</a></li> <li class="submenu-item"><a href="#">团队介绍</a></li> <li class="submenu-item"><a href="#">联系方式</a></li> </ul> </li> <li class="nav-item"> <a href="#">联系我们</a> </li> </ul> </nav> <script> // 可选：如果需要更精细的交互控制，可通过JS增强（比如处理快速悬停的延迟） const navItems = document.querySelectorAll('.nav-item'); let submenuTimer = null; navItems.forEach(item => { // 鼠标移入 item.addEventListener('mouseenter', () => { clearTimeout(submenuTimer); const submenu = item.querySelector('.submenu'); if (submenu) submenu.style.display = 'block'; }); // 鼠标移出 item.addEventListener('mouseleave', () => { submenuTimer = setTimeout(() => { const submenu = item.querySelector('.submenu'); if (submenu) submenu.style.display = 'none'; }, 200); // 延迟隐藏，提升体验 }); }); </script> </body> </html>二级菜单-过渡效果
缩放过渡二级菜单
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>缩放过渡二级菜单</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; } body { font-family: "Microsoft Yahei", sans-serif; padding: 50px; background: #f5f5f5; } /* 菜单容器 */ .card-menu { width: 250px; background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); overflow: hidden; } /* 一级菜单标题 */ .menu-header { padding: 20px; font-size: 18px; font-weight: bold; color: #2c3e50; cursor: pointer; border-bottom: 1px solid #eee; } /* 二级菜单容器 - 缩放过渡 */ .submenu { padding: 0 15px; /* 初始状态：缩放+透明 */ transform: scaleY(0); transform-origin: top; /* 从顶部开始缩放 */ opacity: 0; max-height: 0; overflow: hidden; transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease; } /* 二级菜单项 */ .submenu-item { padding: 12px 0; border-bottom: 1px solid #f0f0f0; } .submenu-item:last-child { border-bottom: none; } .submenu-item a { color: #666; font-size: 14px; transition: color 0.2s; } .submenu-item a:hover { color: #e74c3c; padding-left: 5px; } /* 激活时展开 */ .card-menu.active .submenu { transform: scaleY(1); opacity: 1; max-height: 500px; padding: 15px; } </style> </head> <body> <div class="card-menu" id="cardMenu"> <div class="menu-header" id="menuHeader">更多功能</div> <ul class="submenu"> <li class="submenu-item"><a href="#">设置</a></li> <li class="submenu-item"><a href="#">帮助中心</a></li> <li class="submenu-item"><a href="#">反馈建议</a></li> <li class="submenu-item"><a href="#">退出登录</a></li> </ul> </div> <script> // 点击标题切换缩放效果 const cardMenu = document.getElementById('cardMenu'); const menuHeader = document.getElementById('menuHeader'); menuHeader.addEventListener('click', () => { cardMenu.classList.toggle('active'); }); </script> </body> </html>
