jQuery实现点击按钮展开和收起
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
jQuery实现点击按钮展开和收起的更多相关文章
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
- jquery实现点击按钮弹出层和点击空白处隐藏层
昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){ $('.autoBtn' ...
- vue自己写了一个div菜单，点击按钮展开，点击其他地方关闭这个div菜单
需求是通过点击body页面,在其他地方就关闭这个<div>菜单,给这个div一个id:problemList,但是点击我打开的按钮,不关闭. created () { document.o ...
- jquery 实现 点击按钮后倒计时效果，多用于实现发送手机验证码、邮箱验证码
原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html <!DOCTYPE html PUBLIC " ...
- jquery实现点击按钮滑动到指定位置
<body> <script type="text/javascript"> function click_scroll() { var scroll_of ...
- jquery 实现点击按钮后出现倒计时效果（用于实现发送手机验证码、邮箱验证码）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 记录--前端 页面 jquery 被点击按钮修改样式 其他默认
jquery实现页面条件筛选 此功能类似淘宝的条件筛选,主要是页面样式的更改,问了大神也磨磨唧唧了很久才搞定0.0.... 先贴代码..... 代码知识有 border-radius 设置圆角边框 s ...
- js jquery 实现点击按钮后,倒计时60秒才能再次点击发送验证邮件
<input type="button" id="btn" value="免费获取验证码" /><script type= ...
- jquery( 点击按钮出来文本框并限制文本框的个数)
// 首先呢 编辑这个文章 主要是用于和大家的交流 以便学习和交流!! <div class="form-group" id="spots"> ...
随机推荐
- mysql---级联更新和删除操作
我们通常有这样的需求:删除表Table 1中记录,需要同时删除其它表中与Table 1有关的若干记录. 对于这种,我们有两种解决方法: 一,使用innodb表的外键约束 ALTER TABLE `sc ...
- Spring 2.5配置文件详解（转）
http://book.51cto.com/art/201004/193743.htm 6.2.3 Spring 2.5配置文件详解 Spring配置文件是用于指导Spring工厂进行Bean生产. ...
- 什么是SolrCloud
1.1 什么是SolrCloud SolrCloud(solr 云)是Solr提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud.当一个系统的索引数据量少的时候 ...
- jenkins连接gitlab，提示returned status code 128，附解决办法
在项目中配置git仓库地址,报无权限 Failed to connect to repository : Command "D:\Program Files\Git\mingw64\bin\ ...
- c++后台开发面试常见知识点总结（四）数据库
数据库的索引类型 聚集索引和非聚集索引的区别(叶节点存储内容) 唯一性索引和主码索引的区别 索引的优缺点,什么时候使用索引,什么时候不能使用索引(重点) 索引最左前缀问题 数据库中事务的ACID 数据 ...
- sublime-1
1.提示找不到margo go get github.com/DisposaBoy/MarGo(该工具已经被作者清空了,大部分人在这一步就被卡住了) 如果你也是在第二步卡住了,那么可以按照我的方法进行 ...
- oracle trim无效？
这里说说如果是全角空格怎么去除 方法一 trim(TO_SINGLE_BYTE('aaa')) 方法二 SELECT TRIM(replace('aaa',' ','')) FROM dual
- 玩玩Mybatis的逆向工程
通过数据库 逆向生成代码 主要配置的文件: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...
- SQL Ssever 安装.NET3.5 框架
SQL Ssever 安装.NET3.5 框架 我们在安装 SQL Sever 2014 的时候必须要安装 .NET3.5 框架,然后才能继续安装 SQL Server 2014. 您可能在安装 SQ ...
- 4K超清，2500万人在线，猫晚直播技术全解读
摘要: 作为双11的必备节目,今年的猫晚通过优酷.浙江卫视.东方卫视进行了全程网络直播和电视直播,吸引了超过全球超过2.4亿人收看.猫晚期间,优酷基于阿里云最新的广播级高可靠直播方案,为近2500万的 ...