JS实现“隐藏与显示”功能(多种方法)

前端之家收集整理的这篇文章主要介绍了JS实现“隐藏与显示”功能(多种方法)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面我将效果图展示出来:

1,通过按钮实现隐藏与显示

这个是通过按钮点击实现的隐藏与显示,具体代码如下:

<Meta charset="UTF-8"> 通过按钮实现隐藏和<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>
Jaxzm欢迎您的访问 此茶虽未饮,未闻,我心自生香.
Jaxzm欢迎您的访问

注意在这个js里面的setTimeout()函数,setTimeout(function,time).更加精准地用法:

执行一段代码:

执行一个函数:

还有一种方式就是通过jQuery方法来实现,通过切换实现隐藏与显示;效果如下:

看到它的样子,是否会觉得和第一个很像,但是也会发现它和第一个是不一样的,具体代码如下:

通过jQuery实现展开收缩
通过jQuery代码实现隐藏和显示

欢迎来到我的博客Jaxzm!

目前我在学习GoF的设计模式,你想了解么?想要了解的话,请点击按钮。

这段代码和第一个唯一不同的便是这个js代码

这里首先要引入jQuery库,然后才能调用jquery库里面的方法slideToggle(),方法的具体实现如下:

当点击了按钮,它就会将显示与隐藏进行切换。

学习了以上知识之后,就可以实现博客页面显示。但是这里还需要了解nextSibling和prevIoUsSiling这两个属性

nextSibling 它是返回某一元素后面紧跟的元素。prevIoUsSibling 它是返回某一元素之前紧跟的元素。

鼠标控制动画展开