jquery点击展示与隐藏更多内容
(编辑:jimmy 日期: 2024/11/18 浏览:3 次 )
先上效果图
点击前
点击后展开
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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:Javascript 实现放大镜效果实例详解