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"> ...
随机推荐
- 第8篇NFS PersistentVolume
一.部署nfs服务端: k8s-master 节点上搭建了 NFS 服务器,也可以在部署节点搭建,原理一样 (1)安装nfs服务: yum install -y nfs-utils rpcbind v ...
- word--->pdf资料转载..
https://blog.csdn.net/dsn727455218/article/details/80667927
- CNN基础四：监测并控制训练过程的法宝——Keras回调函数和TensorBoard
训练模型时,很多事情一开始都无法预测.比如之前我们为了找出迭代多少轮才能得到最佳验证损失,可能会先迭代100次,迭代完成后画出运行结果,发现在中间就开始过拟合了,于是又重新开始训练. 类似的情况很多, ...
- Jenkins的安装、部署、启动(完整教程)
测试环境 Linux系统 Centos 7 安装步骤: 1.安装jdk 我安装的是jdk8,此处就不多说了,自己百度哈,很简单 2.安装jenkins 首先依次执行如下三个命令: 2.1.导入镜像: ...
- Bazel: Ubuntu安装bazel-version-installer-os.sh失败的解决方法。
使用 bash ./bazel-version-installer-os.sh from: http://www.cnblogs.com/Need4Speak/p/5438240.html
- Reverse array
数组颠倒算法 #include <iostream> #include <iterator> using namespace std; void reverse(int* A, ...
- VIM的一些使用积累
替换: :s/cst/dst/gc 黏贴后格式不对齐: gg=G 全选并黏贴 gg :"+yG
- 二叉树入门（洛谷P1305）
题目描述 输入一串完全二叉树,用遍历前序打出. 输入输出格式 输入格式: 第一行为二叉树的节点数n. 后面n行,每一个字母为节点,后两个字母分别为其左右儿子. 空节点用*表示 输出格式: 前序排列的完 ...
- ASP.NET MVC 随手记
ViewBag: 本质上市一个字典,提供了一种View可以访问的动态数据存储.这里用到了.NET 4.0的动态语言特性.可以给ViewBag添加任意属性,并且这个属性是动态创建的,不需要修改类的定义就 ...
- oracle 批处理 bulk collect 带来的性能优势
create table -- drop table tmp_20190706_220000-- truncate table tmp_20190706_220000 create table tmp ...