JS实现"隐藏与显示"功能（多种方法)

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

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

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

！DOCTYPE html html hearteta charset=' UTF-8 '标题通过按钮实现隐藏和显示/titlestyle type='text/css ' .车身{ margin : 0 auto } # show { width : 600 pxh three : auto font-size : 14px；背景-颜色： # E4C 392；显示器：块；padding: 10pxmargin: 0自动订单-半径： 10px} #显示H2 { color : # 11 C2 eemargin : 0 auto }。滑动{ margin: 0 autopadd : 0宽度： 600像素；边框-top:实心4px # D6A55C}。BTN-幻灯片{背景色：浓汤；宽度： 80px高度：30 px文本对齐：中心；margin: 0自动订单-半径： 8px边距： 0自动显示：块；}/style脚本类型=' text/JavaScript '函数div show(){ document。getelementbyid(' BTN秀')。风格。display=' block文件。getelementbyid(' btnhref ').innerHTML='关闭；文件。getelementbyid(' btnhref ').href=' JavaScript : div hidden()'；} function div hidden(){ document。getelementbyid(' BTN秀')。风格。显示='无'；文件。getelementbyid(' btnhref ').innerHTML='了解；文件。getelementbyid(' btnhref ').href=' JavaScript : DivShow()'；}/脚本/head dydiv id=' show ' H2通过点击按钮实现隐藏和显示/h2hr /p欢迎来到我的博客贾克兹姆/pp .目前我在学习美好的老星期五可靠的好友的设计模式，你想了解么？想要了解的话，请点击按钮/pdiv id=' BTN秀' style=' display : none'pGoF所描述的23种设计模式，总共可以分为三种类型：创建型模式，行为型模式，结构型模式/pp。我觉得比较难的是创建型模式，因为它说的比较抽象，所以我不容易理解它，然后我编码也比较少，所以就不太容易理解这个/p/div/divp class=' slide ' a href=' JavaScript : div show()；id='btnhref' class='btn-slide '了解/a/p/body/html其中，主要能够实现这个功能的是射流研究…代码，

通过getElementById()这个方法找到对应元素，进而控制它的风格，以此来做对应的功能。这是一个比较简单的方法。

接下来演示的是另外一种方式：

这个是通过具体的时间限制来控制其隐藏与显示，

代码如下：

！DOCTYPE html html hearteta charset=' UTF-8 '标题通过定时实现隐藏和显示/titlestyle type='text/css ' .车身{ margin: 0 autopadd : 0背景色-: # d6a 55c；} # show {底色： # E4C 392；宽度： 700像素；高度： 100像素；显示器：块；margin : 0 autopadding : 10px font-size : 14px；height: auto文本对齐：中心；} # show h2 { color: # 3CC4A9}。hid {背景： # E8E 8 e 8文本对齐：中心；宽度： 700像素；高度： 100像素；padding: 10px 10px 0 0margin: 0自动显示：块；文本装饰：无；}/style脚本类型=' text/JavaScript ' var h=0；函数AddH(){ if(h 400){ h=h 5；文件。getelementbyid(' show ')。风格。高度=h ' px} else { return}setTimeout('addH()'，30)；}window.onload=函数show AdS(){ AddH()；setTimeout('subH()'，5000)；}函数subH(){ if(h 0){ h-=5；文件。getelementbyid(' show ')。风格。高度=h ' px} else { document。getelementbyid(' show ')。风格。显示='无'；返回；}setTimeout('subH()'，30)；}/script/head dydiv id=' show ' h2jaxzm欢迎您的访问/h2span此茶虽未饮，未闻，我心自生香/span/div class=' hid ' h1 jaxzm欢迎您的访问/h1/div/div/body/html注意在这个射流研究…里面的setTimeout()函数，setTimeout(函数，时间)。更加精准地用法：

执行一段代码：

var I=0；setTimeout(' I=1；警报(一)1000年；执行一个函数：

var I=0；setTimeout(函数(){ I=1；警报（一);},1000);还有一种方式就是通过jQuery方法来实现，通过切换实现隐藏与显示；效果如下：

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

！doctype html heartheta charset=' utf-8 ' title，通过jQuery/title script src=' http:http://libs.baidu.com/jquery/1.10.2/jquery.min.js'类型=' text/JavaScript '/script style type=' text/CSS '进行扩展和收缩。车身{ margin: 0 auto} # show { width: 600pxheight: autofont-size : 14px；背景-color : # E4C 392；display:块；padding: 10pxmargin: 0 autoborder-radius : 10px；} # show h2 { color: # 11C2EEmargin: 0 auto}.滑动{ margin: 0 autopadd : 0；宽度： 600 px；边框-top:实心4px # D6A55C}.BTN-slide { background-color : bisque；宽度： 80px；高度：30 px；文本对齐：中心；margin: 0 autoborder-radius : 8px；margin: 0 autodisplay:块；}/style script type=' text/JavaScript ' $(文档)。ready(function () {$(')。BTN-slide’)。单击(function () {$('#btnshow ')。slide Toggle()；});});/script/head dydiv id=' show ' H2 hide并通过jQuery代码显示/h2hr /p欢迎来到我的博客Jaxzm！/pp目前正在学习GoF的设计模式。你想知道吗？如果你想知道，请点击按钮。/pdiv id=' BTN show ' style=' display : none；pGoF描述的23种设计模式可以分为三种：创造模式、行为模式和结构模式。/pp我觉得创建一个模式很难，因为它比较抽象，所以不容易理解，然后我的编码比较少，所以不容易理解这个。/p/div/divp class=' slide ' a href=' JavaScript : div show()；'Id='btnhref' class='btn-slide '了解/a/p/body/html这段代码与第一段代码唯一的区别是这段js代码：

这里先介绍一下jquery库，然后可以调用jQuery库中的slideToggle()方法。该方法的具体实现如下：

当按钮被点击时，它将在显示和隐藏之间切换。

学习了以上知识，就可以实现博客的页面展示了。然而，这里有两个属性需要理解：下一个同级和前一个同级。

NextSibling，返回一个元素，后面跟一个元素。PreviousSibling是紧接在返回元素之前的元素。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8' /title鼠标控制动画展开/title style type=' text/CSS ' body { margin : 0 auto；padd : 0；font-size : 9 pt；线高：180%；} # pn { background : # F8 F8；height: auto宽度： 750 px；display:块；margin: 0 autopadding: 5px}.btn { width: 80pxheight: 20pxpadding: 5px 3px 5px 3px文本对齐：中心；文本装饰：无；背景技术： # f0f 0；border: 1px固体# CCC}.内容{border: 1px固体# CCCdisplay:无；padding: 5px}.title { font-weight : bold；color: # 3030FFfont-size :11 pt；}.字幕{ color: # CCC}.btm { text-align : right；height: 30px}/style script type=' text/JavaScript ' var time=300；var h=40函数showdiv(obj){//obj . parent node . next sibling . next sibling . style . display=' block '；var x=obj . parent node . next sibling；//包含很多空格作为文本节点，所以我们使用nextSibling和previousSibling时会出现问题。//因为FireFox会将文本节点视为元素节点的兄弟节点。我们可以添加nodeType来判断。//当上一个节点或下一个节点是文本节点时，继续搜索，直到找到下一个元素节点。//nodeType值有几种：////元素节点的nodeType值为1//属性节点的nodeType值为2//文本节点的nodeType值为3if (x.nodeType！=1){ x=x . next sibling；} x . style . display=' block '；obj . ParentNode . style . display=' none '；}函数hidediv(obj){ obj . parent node . parent node . style . display=' none '；var x=obj . parent node . parent node . previoussibling；if (x.nodeType！=1){ x=x . previoussibling；} x . style . display=' block '；}/script/head dydiv id=' pn ' divp class=' title '原生js实现工具提示提示框的效果/pp class=' subtitle ' 2016年11月13日/PP摘要：在js的世界里，每一个小小的特效都是那么微不足道，却又是那么令人向往和好奇。前端工程师的任务特别高，因为他们的小设计会激发别人的求知欲。比如我随便一瞥就看到了这个工具提示的特效，我有征服它的欲望。例如，显示此工具提示的效果：这是.a onclick=' showdiv(this)；'Href='# '全文/a/pdiv class=' content ' pAbstract :在js世界里，每一个小小的特效都是那么微不足道，却又是那么令人向往和好奇。前端工程师的任务特别高，因为他们的小设计会激发别人的求知欲。比如我随便一瞥就看到了这个工具提示的特效，我有征服它的欲望。例如，此工具提示的效果显示这是工具提示提示框的效果。/pp Tooltip插件根据需求生成内容和标签。默认情况下，工具提示位于其触发元素的后面。您可以通过以下两种方式添加工具提示：p通过数据属性：要添加工具提示，只需将data-toggle='tooltip '添加到锚点标记。锚点的标题是工具提示的文本。/p默认情况下，插件将工具提示设置在顶部。/pdiv class=' btm ' a href=' # ' class=' BTN ' onclick=' hidediv(this)；'收起全文/a/div/divhr /divp class='title '原生js实现工具提示提示框的效果/pp class='副标题' 2016年11月13日/pp摘要：在js的世界里，每一个小小的特效都是那么微不足道，却又是那么令人向往和好奇。前端工程师的任务特别高，因为他们的小设计会激发别人的求知欲。比如我随便一瞥就看到了这个工具提示的特效，我有征服它的欲望。

例如，显示此工具提示的效果：这是.a onclick=' showdiv(this)；'Href='# '全文/a/pdiv class=' content ' pAbstract :在js世界里，每一个小小的特效都是那么微不足道，却又是那么令人向往和好奇。前端工程师的任务特别高，因为他们的小设计会激发别人的求知欲。比如我随便一瞥就看到了这个工具提示的特效，我有征服它的欲望。例如，此工具提示的效果显示这是工具提示提示框的效果。/pp Tooltip插件根据需求生成内容和标签。默认情况下，工具提示位于其触发元素的后面。您可以通过以下两种方式添加工具提示：p通过数据属性：要添加工具提示，只需将data-toggle='tooltip '添加到锚点标记。锚点的标题是工具提示的文本。/p默认情况下，插件将工具提示设置在顶部。/pdiv class=' btm ' a href=' # ' class=' BTN ' onclick=' hidediv(this)；'折叠全文/a/div/div/body/html。效果如下：

事实上，上述方法实现起来相对简单。实用性比较大。

以上就是JS实现边肖介绍的“隐藏显示”功能的多种方式。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！