jQuery实现点击按钮展开和收起
2024-09-05 03:44:50
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉与收起</title>
<link rel="stylesheet" href="css/showhide.css" /> <script type="text/javascript" src="js/showhide.js" ></script>
</head>
<body>
<div id="showhide">
<p>假如生活欺骗了你</p>
<p>不要悲伤,不要哭泣</p>
<p>忧郁的日子总会过去的</p>
<div id="show" style="display:none;">
<p>
因为你要知道,再挣扎也是没用的,它还是会再欺骗你一次
</p> <p>
直至你在失望与孤独中死去
</p>
</div> </div>
<p class="slide">
<a href="javascript:showdiv();" id="strHref" class="btn-slide">更多选项+
</a>
</p> </body>
</html>
css
body
{
margin: 0 auto;
padding: 0;
}
a:focus
{
outline: none;
}
#showhide
{
background: black;
color: white;
width: 600px;
display: block;
margin: 0 auto;
padding: 5px;
font-size: 20px; height: auto;
font-family: "微软雅黑";
}
.slide
{
margin: 0;
padding: 0;
width: 600px;
border-top: solid 4px gray;
margin: 0 auto;
}
.btn-slide
{
background: gray;
text-align: center;
width: 120px;
height: 30px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
color: #fff;
text-decoration: none;
}
js
$(document).ready(function () {
$(".btn-slide").click(function () {
$("#show").slideToggle();
});
});
效果;
2017-11-02 09:56:57
最新文章
- #ifdef _DEBUG #undef THIS_FILE static char THIS_FILE[]=__FILE__; #endif
- EL操作 web 对象的常用方法
- Load Runner录制C/S客户端
- JAVA的单例模式与延时加载
- poj1236 强连通缩点
- Javascript面向对象编程:构造函数的继承
- websphere变成英文了
- Components of the Impala Server
- MySQL的链接,查看数据库,使用数据库,查看表
- poj 3624 Charm Bracelet(区间dp)
- github jekyll site不再使用Maruku由于Markdown翻译员,但kramdown
- 吾八哥学Selenium(三):操作复选框checkbox/单选框radio的方法
- 《读书报告 -- Elasticsearch入门 》-- 安装以及简单使用(1)
- BZOJ1061 NOI2008 志愿者招募 线性规划、费用流
- c++11 tuple实现
- JMD Handy Baby 2 to Decode &; Adding New BMW 525 ID46 Key
- Beta冲刺 (3/7)
- 安装 composer 并启动 yii2 项目
- BZOJ2264 : Free Goodies
- 利用QPainter绘制散点图