jquery点击展示与隐藏更多内容
更新时间:2016年12月03日 15:00:36 作者:静深的成长笔记
这篇文章主要为大家详细介绍了jquery点击展示与隐藏更多内容的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
先上效果图
点击前
点击后展开
html代码
<div id="tips" class="center-block"> <h5 class="tips_head"> <u>遇到问题?</u> </h5> <div class="tips_content"> <ol> <li>Ctrl+F5刷新本页面</li> <li>关闭页面,重新加载本页面和登录</li> <li>更换浏览器(建议使用火狐和谷歌浏览器)</li> <li>联系我们 </li> </ol> </div> </div>
jquery代码
$(function() { //遇到问题的弹出文字 $("#tips h5.tips_head").bind("click", function() { var $tips_content = $(this).next("div.tips_content"); if ($tips_content.is(":visible")) { $tips_content.hide(); } else { $tips_content.show(); } }) })
css代码
.tips_head { padding-left:20px; cursor: pointer ; text-align:left; margin-top:20px; color:red;} .tips_content { padding: ; border-top: 1px solid #0050D0; display:block; display:none; text-indent: 2em; text-align:left; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
暂时没有想到什么好的解决办法,我现在加了个浏览器判断非ie的话就注册blur事件,这样有个问题就是blur实在别的控件活动焦点的时候,txtStation控件注册的方法是为了填充它紧挨着的一个下拉列表2010-08-08基于twbsPagination.js分页插件使用心得(分享)
下面小编就为大家带来一篇基于twbsPagination.js分页插件使用心得(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-10-10Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码
Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动的实现代码,需要的朋友可以参考下。2010-11-11
最新评论