如何使用jQuery控制容器显示和隐藏

来源：互联网 2023-03-16 23:54:24 210

不管我们用H5做PC端页面还是手机端页面，都会涉及到显示和隐藏容器的功能，显示和隐藏容器最直接的办法肯定是通过css的display属性来设置了。如果display属性为none则这个容器就会隐藏，而且在页面上不再占位，再显示的话讲display设置为对应的属性如block等。这种方式在使用的时候会略显麻烦，jQuery给我们提供了对象显示和隐藏的方法，使用起来非常方便，下面我们就来看一下Jquery是如何显示和隐藏对象的。

工具/原料

jquery.min.js
任意前端工具
chrome浏览器

方法/步骤

jquery显示隐藏是通过hide和show两个方法来实现的，我们先来搭建一个基础测试页面吧。源代码和页面显示如下，页面存在一个按钮和一个div未main的容器和他的子容器myContent。

如何使用jQuery控制容器显示和隐藏

下面我们来做一个点击按钮隐藏main的功能。我们在ready里面写一个按钮点击事件，在事件的方法中设置$("#main").hide();注意hide后面一定要有小括号。写好后再页面上点击按钮可以看到整个main都隐藏了，而且占位也没有了，按钮移到了网页的上端。如果希望隐藏的时候有一个过程，可以在hide()里面增加时间参数，如$("#main").hide(1000),这样隐藏就会在1秒钟内完成而不是立刻完成。

如何使用jQuery控制容器显示和隐藏