Js的classList实现导航简单的收起展开

清疚 2022-12-06 04:13 136阅读 0赞

![f139d78a75deca8b8f97a96a0c193ce0.png][]

使用Js的classList快速实现导航简单的收起展开

**1**

**首先我们设置导航的的样式**

![0dc8af0c15721a555076a6e5dcf0bf87.png][]

![40453b501e48ec1065d3dca57abfe61b.png][]

**2**

**接下来编写js代码**

![c46ec5c0952a384566fdaac58b460602.png][]

![b0b9c373848aba5e15d3ce387135bce8.gif][]

**3**

** 当然除了id获取元素我们还可以通过**

![6d6ab31ffd865876c0f84b4389afbec7.png][]

我们也还有其他其他的事件可以使用

![3b0838ba8f142b13231aef964c57e64a.png][]

END

![08f56e087fcc0ec8ac44f76c751df5d2.gif][]

![1c3b88344d3c19a41cfaf9c4672d642f.png][]

ITSTAR

扫码关注我们吧

![2d734f0e04f8ae82f47170dc51fab91e.png][]

[f139d78a75deca8b8f97a96a0c193ce0.png]: /images/20221123/f4a1938d9d39461bbc4d1b1fd2000974.png
[0dc8af0c15721a555076a6e5dcf0bf87.png]: /images/20221123/82d2ee1e0e6c4815800621d6bcbf572f.png
[40453b501e48ec1065d3dca57abfe61b.png]: /images/20221123/2eebf20c81784738b121737e5d3d8c7d.png
[c46ec5c0952a384566fdaac58b460602.png]: /images/20221123/d1c8e3ed31b74e59b643cfdc21a93d90.png
[b0b9c373848aba5e15d3ce387135bce8.gif]: /images/20221123/8efaa09df5a745d1b290b1bec4493688.png
[6d6ab31ffd865876c0f84b4389afbec7.png]: /images/20221123/e566c22666e742aaacc01cc6160fdfcf.png
[3b0838ba8f142b13231aef964c57e64a.png]: /images/20221123/f36ad0a3bc0e4c37afdccef82af9c71b.png
[08f56e087fcc0ec8ac44f76c751df5d2.gif]: /images/20221123/ca464de5e60a490c8f4c2cd2e4616eb1.png
[1c3b88344d3c19a41cfaf9c4672d642f.png]: /images/20221123/462729bdcbaa4d68bd4c921ecef1ed3d.png
[2d734f0e04f8ae82f47170dc51fab91e.png]: /images/20221123/f0aeba5444d748dfa74889fc3a6b587e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 实现多行文本“展开收起”

——————— Y · F · E ——————— ![957c4fe0b7853ad43aeb4c4e5f5bacd1.png][] 多行文本展开收起是一个很常见的交互，

淡淡的烟草味﹌/ 2023年01月23日 02:54/ 0 赞/ 836 阅读

相关页面展开收起php代码,jQuery实现的页面详情展开收起功能示例

本文实例讲述了jQuery实现的页面详情展开收起功能。分享给大家供大家参考，具体如下： jQuery实现页面详情展开收起 .detailpd \{ padding-top:

た入场券/ 2023年01月17日 03:25/ 0 赞/ 219 阅读

相关 Js的classList实现导航简单的收起展开

![f139d78a75deca8b8f97a96a0c193ce0.png][] 使用Js的classList快速实现导航简单的收起展开 1 首先我们设置导航的的样式

清疚/ 2022年12月06日 04:13/ 0 赞/ 137 阅读

相关原生js操作元素类名—classList.add()、classList.remove()、classList.contains()、classList.toggle()

原生js操作元素类名 [classList.add( newClassName )；][classList.add_ newClassName] [class

悠悠/ 2022年11月22日 02:49/ 0 赞/ 160 阅读

相关基于element ui的收起展开检索条件效果

<el-button type="text" style="margin-left:600px;color: 8cc5ff;text-decoration: under

桃扇骨/ 2022年09月01日 13:48/ 0 赞/ 176 阅读

相关 js实现侧边导航栏展开和折叠

效果：左侧导航栏，点击展开，显示子菜单。再次点击，菜单折叠。代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

╰半夏微凉°/ 2022年08月23日 05:46/ 0 赞/ 328 阅读

相关 Jquery实现简单的点击展开和收起

当标签逐渐增多时，页面就会随着拉长；用户体验不佳。针对我自己博客用`Jquery` 写了一个小方法用于实现展开和收起的 ![image][] `html`代码 <

布满荆棘的人生/ 2022年03月10日 09:09/ 1 赞/ 473 阅读

相关 vue 写点击展开及收起

<template> <div> <div> <p id="p">Lorem ipsum dolor sit amet,

小灰灰/ 2021年12月18日 22:21/ 0 赞/ 562 阅读

相关 JQ 展开收起

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

刺骨的言语ヽ痛彻心扉/ 2021年12月10日 08:53/ 0 赞/ 345 阅读

相关网页顶部广告展开与收起

网页顶部广告展开与收起在很多网站中，为了广告推送效果，往往会在进入网站的时候，出现弹窗；一定时间后，再次收起，不影响用户的体验。 --------------

客官°小女子只卖身不卖艺/ 2021年09月16日 22:54/ 0 赞/ 427 阅读