兼容性 --- 页面宽度控制导航栏的显示与隐藏

2023-11-06

我要实现这么一个需求:
当页面宽度window.innerWidth > 769的时候显示成这样
在这里插入图片描述
当页面宽度window.innerWidth < 769的时候,下面一行导航栏的字隐藏,显示成这样:
在这里插入图片描述

1、首先获取这个ul,类名叫.subnav__list
2、定义两个函数,用classList.add添加offshow类,用classList.remove移除offshow类,offshow类只有一个样式display:none,让元素隐藏
3、给window添加一个监听resize事件,监听窗口变化事件,当页面宽度小于769就调用hideSubnavList(), 当宽度大于769就调用showSubnavList()函数

// 获取元素
const subnavList = document.querySelector('.subnav__list');

// 添加事件函数
function hideSubnavList() {
  subnavList.classList.add('offshow');
}

// 删除事件函数
function showSubnavList() {
  subnavList.classList.remove('offshow');
}

// 添加窗口大小改变事件监听器
window.addEventListener('resize', () => { 
  if (window.innerWidth < 769) {
    hideSubnavList();
  } else {
    showSubnavList();
  }
}, 300);

这里不要用classList.toggle,toggle是切换

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

兼容性 --- 页面宽度控制导航栏的显示与隐藏 的相关文章

随机推荐

  • typescript在vue3中的使用。

    1 项目安装typescript 我在创建项目时就选择了安装typescript 如果创建vue3项目时并没有安装typescript依赖 也可以用命令行安装 执行如下命令 npm install typescript save dev 2
  • DNSPod十问黄欢:为什么互联网大厂都要去造车?

    荆虹科技创始人 3D TOF视觉领域专家 六西格玛黑带大师 天津大学工业工程硕士 曾就职于台湾扬信与盛泰光学 领导并服务过Moto Nokia 苹果手机摄像头项目 人称奶罩 腾讯云中小企业中心总经理 DNSPod创始人 洋葱令牌创始人 网络
  • 有一个含n(n」2)个整数的数组a,判断其中是否存在出现次数超过所有元素一半的元素

    一 问题描述 有一个含n n gt 2 个整数的数组a 判断其中是否存在出现次数超过所有元素一半的元素 二 问题分析与解答 分析 可以先将数组a中的元素递增排序 再求出出现次数最多的次数maxnum 最后判断是否满足条件 代码实现 incl
  • 【CV】第 5 章:神经网络架构和模型

    大家好 我是Sonhhxg 柒 希望你看完之后 能对你有所帮助 不足请指正 共同学习交流 个人主页 Sonhhxg 柒的博客 CSDN博客 欢迎各位 点赞 收藏 留言 系列专栏 机器学习 ML 自然语言处理 NLP 深度学习 DL fore
  • unity3d 学习笔记(二)

    AudioClip 声音资源的使用 unity3d中声音资源可以设置为3d音效或者2d音效 3d音效受空间的影响 越近声音越大 component Audio source 声音的发生物体 Audio listener 声音的接受者 一般放
  • Unity3D循环滚动的背景图片?制作方法!!!!

    链接 http momowing diandian com post 2013 01 26 40049505995 真是抱歉 从今天起才认真的翻阅android game example 这个插件 开始熟悉一下外国佬的一些编程方式 相信很多
  • Redis事务详述,java百度人脸识别

    1 简介 Redis类似大多数成熟的数据库系统一样 提供了事务机制 Redis的事务机制非常简单 它没有严格的事务模型 无法像关系型数据库一样保证操作的原子性 Redis事务最大的作用是保证多个指令的串行执行 它可以借助于Redis单线程读
  • .获取MAC地址方法大全

    Windows平台下用C 代码取得机器的MAC地址并不是一件简单直接的事情 到目前为止 作者尚未发现有任何一个通用的100 的适用于所有Windows平台的方法可以稳定的取得MAC地址 而有些应用 比如MMORPG 则需要稳定的得到机器的M
  • scrapy-redis报错:spop() takes 2 positional arguments but 3 were given

    Scrapy Redis报错 spop takes 2 positional arguments but 3 were given 解决之旅 大家好 在这篇博客中 我们将一起探讨如何解决在使用Scrapy Redis时遇到的一个常见报错问题
  • springboot整合AOP,实现log操作日志

    添加依赖
  • msys2 pacman常用命令以及添加国内源加速pacman

    转载请注明作者和出处 http blog csdn net john bh 文章目录 常见命令 安装软件 更新系统 卸载软件 搜索软件 查询软件信息 软件包组 清理缓存 最常用的pacman命令小结 给MSYS2 添加源 添加清华源和中科大
  • c语言--指针进阶(2)两句超级难理解的代码

    1 解释代码含义 深刻认识指针 void 0 即解释为 把0强制转换成void 函数指针类型 该指针指向的函数是无参的 返回类型是void型 然后0就变成一个函数的地址 然后解引用操作 最后调用以0为地址的该函数 分析思路 void 代表函
  • 给el-table的表头某列添加自定义el-dropdown,点击无效的问题

    slot的方式
  • Linux内核网络结构,和收发数据基本流程

    不管是大型虚拟化云网络 还是嵌入式物联网系统 Linux网络都扮演着重要的角色 借用一句话说 如果说网络是信息系统的基石 那么Linux网络系统就是基石中的钢筋 它经过几十年的发展 它千锤百炼 几乎包含了市面上所有的网络通讯功能 要想一下子
  • Java 生态圈中的嵌入式数据库,哪家强?

    每天早上七点三十 准时推送干货 嵌入式数据库一个很陌生的词汇 以前只是听说 但是没有真正使用过 今天阿粉和大家一起来揭开它的面纱 一 介绍 初次接触嵌入式数据库 Embedded Database 可能有点模糊 什么是嵌入式数据库 为什么要
  • Mysql 使用关键字作为字段的反例及数据库命名规范

    1 数据库表的设计 CREATE TABLE p article label id int 11 NOT NULL AUTO INCREMENT COMMENT 编号 group int 3 DEFAULT NULL COMMENT 文章组
  • 蓝牙HCI Dongle说明

    Chipsets 本项目主要实现了蓝牙Host协议栈 并没有包含Controller部分 如果需要实现蓝牙交互 按照Core Spec 需要通过HCI接口连接其他蓝牙芯片实现蓝牙功能 由于HCI接口层是Spec有规定的 所以只要符合HCI接
  • mysql基准测试 -benchmarks

    测试环境 基准测试结果 root 192 168 103 43 sql bench test insert server mysql user root password hive log Testing server MySQL 5 6
  • vue下拉框数据清空后,赋值无效

    1 页面效果 2 背景 一级项目与二级项目联动 当选择 一级项目 后 清空 二级项目 选择框内容 此时出现赋值无效的问题 3 解决 页面 method getSecondName this forceUpdate 添加this forceU
  • 兼容性 --- 页面宽度控制导航栏的显示与隐藏

    我要实现这么一个需求 当页面宽度window innerWidth gt 769的时候显示成这样 当页面宽度window innerWidth lt 769的时候 下面一行导航栏的字隐藏 显示成这样 1 首先获取这个ul 类名叫 subna