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

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(使用前将#替换为@)

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

  • 检查 JavaScript 字符串是否为 URL

    JavaScript 有没有办法检查字符串是否是 URL 正则表达式被排除在外 因为 URL 很可能是这样写的stackoverflow 也就是说它可能没有 com www or http 如果你想检查一个字符串是否是有效的 HTTP UR
  • 如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录?

    因此 就我而言 我使用 Iframe 将 Grafana 附加到我的页面 这为我提供了漂亮且易于使用的图表 可以注意到 每次在图表上进行放大或缩小 使用鼠标单击 交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触
  • 可以使用 jQuery 或 Javascript 将图片的特定部分用作链接吗?

    我有这个想法 将图片 而不是文本 的各个部分链接到不同的页面或网站 并且我想在不实际创建不同的照片并将它们彼此靠近的情况下完成 这样看起来就像是一张完整的图片 这里有人知道如何使用 JavaScript 的变体 例如 jQuery 或纯 J
  • Javascript正则表达式用于字母字符和空格? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我需要一个
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 除了更改标题之外,如何在 Firefox 中强制另存为对话框?

    有没有办法在 ff 中强制打开 www example com example pdf 的另存为对话框 我无法更改标题 如果您可以将文件以 Base64 格式输出到客户端 则可以使用 data uri 进行下载 location href
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • Iframe 相对路径挑战

    我有一个页面 在页面内有一个 Iframe 目录如下 Folder1 Folder2 IframeCSS IframeCSS Css iframePage1 html stuff css parentPage1 html 在 iframeP
  • 为 illustrator 导出脚本以保存为 web jpg

    任何人都可以帮我为 illustrator CC2017 编写一个脚本 将文件以 JPG 格式导出到网络 旧版 然后保存文件并关闭 我有 700 个文件 每个文件有 2 个画板 单击 文件 gt 导出 gt 另存为 Web 旧版 然后右键文
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中
  • 如何在 AngularJS 循环内使用标签

    所以我在里面ng repeat像这样 li li

随机推荐

  • 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