我们借助一款jquery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slidereveal。
如何使用首先在页面中加载jquery库文件和slidereveal.js插件。
基于jQuery的AJAX和JSON的实例 中文WORD版本文档主要讲述的是基于jQuery的AJAX和JSON的实例；过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。有需要的朋友可以下载看看下载复制代码代码如下:然后在body里放置面板元素如div#slider，内容自定，并且放置触发调用面板的元素如button或者a元素。
复制代码代码如下:Helloweba欢迎您！
展开左侧最后直接调用slidereveal.js插件，代码如下：复制代码代码如下:$('#slider').slideReveal({trigger: $("#trigger")});选项设置默认情况下，面板是从左侧滑出，并且将主页面内容向右“推”，并且可以使用键盘的“ESC”键关闭面板。
属性描述默认值width整型，面板宽度。250push布尔型，设置为true，面板展开时会将页面主体内容“推”向一侧，设置为false时，面板展开在页面主体内容之上。trueposition字符串，设置面板展开滑动的方向，可以设置为"left"或"right""left"speed整型，面板展开速度，单位毫秒。300triggerjQuery DOM选择器，设置可以触发面板展示和隐藏的页面元素，如$("#element")未定义autoEscape布尔型，设置是否允许使用键盘的ESC键来隐藏已展开的面板。truetop整型，设置面板距离窗口上部的距离。0show回调函数，当面板展开时调用。-shown回调函数，当面板展开后调用。-hide回调函数，当面板隐藏时调用。-show回调函数，当面板隐藏后调用。-slidereveal.js插件还提供了展开与隐藏的方法调用，代码如下：复制代码代码如下://展开面板$('#slider').slideReveal("show");//隐藏面板$('#slider').slideReveal("hide");以上就是本文给大家分享的全部内容了，有需要的小伙伴快来参考下吧，希望对大家熟悉jQuery能够有所帮助。