简洁的jQuery代码实现显示和隐藏

木有窝的鸟~小通 2019-01-20 08:18:38
开发工具与关键技术:DW中的jQuery显示和隐藏
作者:木有窝的鸟~小通
撰写时间:2019年01月20日

jQuery插件能实现少数代码做到大量代码的JS功能,在我实现的JS显示和隐藏功能的时候,却发现使用了大量的代码。然而,jQuery的插件却用简短的几句就实现了JS的功能,却让我对jQuery插件有了更深一层的了解。

创建了HTML之后,我把jQuery插件引入:


随即通过<UL>标签为外层盒子,利用<UL>标签包裹着<LI>:


这样设置的样式既简洁又能起到整体的作用。再设置一些文字排版,图像排版,通过CSS样式,设置自己喜欢的东西,再比如联想设置漫天飞舞的一些作品,需要通过显示和隐藏的,那就再好不过了。

CSS样式应该熟悉的不可再熟悉了吧:


而用的jQuery插件显示和隐藏效果所需要的代码却很简便,仅需用fadeIn()和fadeOut()方法就能实现:


而我所做的效果是文字和图片的显示和隐藏,简单又方便:


我所需用<UL>标签和<LI>标签结合使用,鼠标移进移出图片就能显示和隐藏。而图片也是谈入淡出,让人觉得格外喜欢,而想怎样设置样式就怎样设置样式,完全能够能达到想要的效果。例如要达到文字标题下拉菜单,图像下拉菜单,选项下拉菜单,等等。而使用JS代码确在一定程度加大了代码量,设置ID,声明变量,操作起来更是难以想象。点击事件,移入移出事件确实得花不少时间




...全文
312 1 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
onOneLight 2019-01-31
  • 打赏
  • 举报
回复
本次更新内容主要是BUG修复和功能改进,相隔4个月又发布了新版本,这次更新更像是例行公事,不过好在修复了很多BUG,另外需要说一下,EasyUI框架当中其实官方还隐藏了不少API没有开放出来,有些朋友建议我把整理一下,将一些好用的API及其用法也更新到中文API中,这里我想说的是,有些API或许是因为不稳定、尚有BUG、未完全实现或者是未经过完整测试的,所以官方并未公布出来,因此我也不建议大家大面积的去使用,这样会带来很多不稳定因素,甚至是致命的BUG,这也是我没有将这些API写入中文API文档的原因,所以有能力并且需要的人就自行去源代码中挖掘吧,我这里只同步官网的API(外加少许的变动或者不影响稳定性和安全性的新增内容)。 jQuery EasyUI 1.4.4版本更新内容: Bug(修复) filebox:修复“clear”和“reset”方法在IE9下无法正常工作的问题; messager:修复调用无参的$.messager.progress()方法之后,再调用$.messager.progress('close')方法时无法正常工作的问题; timespinner:修复在IE8中点击微调按钮时无法正确显示值的问题; window:修复在“onMove”事件中调用“options”方法时无法正常显示的问题; treegrid:修复“getLevel”方法无法接受为0的参数值的问题。 Improvement(改进) layout:改进后的“collapsedContent”、“expandMode”和“hideExpandTool”属性可以支持区域面板; layout:改进后的“hideCollapsedContent”属性可以在折叠面板上设置显示垂直标题栏; layout:新增“onCollapse”、“onExpand”、“onAdd”、“onRemove”事件; datagrid:在排序列的标题上显示↑↓图标; datagrid:新增“gotoPage”方法; propertygrid:新增“groups”方法,以允许获取所有数据租; messager:在显示长消息的的时候支持对消息进行自动滚动; tabs:“disabled”属性支持定义一个被禁用的选项卡面板; tabs:支持百分比大小。

662

社区成员

发帖
与我相关
我的任务
社区描述
提出问题
其他 技术论坛(原bbs)
社区管理员
  • community_281
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧