怎么用js或jq点击展开,出现隐藏的DIV,点击收起DIV又隐藏起来.
方法一:
1 <script type="text/javascript">
$(function() {
$("#toggle").click(function() {
$(this).text($("#content").is(":hidden") ? "收起" : "展开");
$("#content").slideToggle();
});
});
</script>
<a href="#" id="toggle">展开</a>
<div id="content" style="display: none;"><p>隐藏内容<p><p>隐藏内容<p></div>
方法二:
<script>
/*展开和收起用一个div,也可以说它是个按钮,假设它的id=d1;
假设需要显示和隐藏的div叫d2;
下面这段代码只是粗略的实现了你的要求,主要是给你提供个思路;
*/
$(function(){
$('#d1').click(function(){//给d1绑定一个点击事件; /*这个判断的意义是,如果d2是隐藏的,那么让它显示出来,并将d1的文本内容替换成收起,
如果是显示的,那么就隐藏它并将d1的文本内容替换为展开;*/
if($('#d2').is(':hidden'))
{
$('#d2').slideDown('slow');
$(this).text('收起');
}else{
$('#d2').slideUp('slow');
$(this).text('展开');
} /*这是一个很简单的事件处理,如果还需要跟上图片的变换,就在判断的对应位置写入图片或者背景变换的代码,*/
});
});
</script>
<div id='d1'>展开</div>
<div id='d2' style=" display:none">内容</div>
怎么用js或jq点击展开,出现隐藏的DIV,点击收起DIV又隐藏起来.的更多相关文章
- 通过js或jq增加的代码,点击事件或其他一些事件不起作用时
通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
- js 点击展开、收起
//点击展开.收起 window.onload=function(){ var current=document.getElementsByTagName('li')[0]; document.bod ...
- vue.js 实现点击展开收起动画
最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起, 其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~), ,,接下来分享给大家,先上效果图: .vue页面: ...
- --@angularJS--指令之单个点击展开demo
1.expander.html: <!DOCTYPE HTML><html ng-app="app"><head> <title&g ...
- js模拟jq获取id
js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <m ...
- antd的Tree控件实现点击展开功能
antd 的 Tree 控件没有提供点击展开的功能,只能通过左边的三角形实现展开和收起,没办法只好自己实现这个功能. 先看效果 如图实现的是类似 Mac 文件目录形式的结构,有箭头代表是个文件夹,点击 ...
- HTML、CSS、JS、JQ速查笔记
一.HTML 1.编写html文件 a.格式 <!DOCTYPE html> <html> <head> <title>标题</title& ...
- JS、JQ相关小技巧积攒
JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime() 获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...
- Vue 实现点击展开收起
Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...
随机推荐
- [luogu2414 NOI2011]阿狸的打字机 (AC自动机)
传送门 Solution 我们知道AC自动机上如果有一点A的fail[A]->B那么B为A的一个后缀 那么我们的问题\((x,y)\)就变为在y中有多少个点直接或间接连向x的终止节点 如果写暴力 ...
- [luogu1971 NOI2011] 兔兔与蛋蛋游戏 (二分图博弈)
传送门 Solution 补一篇二分图博弈 这个博客写的很详细qwq: https://www.cnblogs.com/maijing/p/4703094.html Code //By Menteur ...
- 继续聊WPF——Expander控件(2)
<Window x:Class="Expander_Sample2.Window1" xmlns="http://schemas.microsoft.com/win ...
- C++判断质数
using namespace std; bool isPrimeNum(int n) { if(n<2) return true; for(int i=2;i*i<=n;i++) { i ...
- AtCoder ARC 076E - Connected?
传送门:http://arc076.contest.atcoder.jp/tasks/arc076_c 平面上有一个R×C的网格,格点上可能写有数字1~N,每个数字出现两次.现在用一条曲线将一对相同的 ...
- (26)改变自动扫描的包【从零开始学Spring Boot】
在开发中我们知道Spring Boot默认会扫描启动类同包以及子包下的注解,那么如何进行改变这种扫描包的方式呢,原理很简单就是: @ComponentScan注解进行指定要扫描的包以及要扫描的类. 接 ...
- AT+CSMP 设置短消息文本参数
AT+CSMP 设置短消息文本参数 2009-05-18 12:03 AT+CSMP 设置短消息文本参数(text模式下) 设置:AT+CSMP=<fo>,<vp/scts>, ...
- session_start() [function.session-start]:
我在学习PHP的,当我尝试做在session_start() - 获取有关错误信息不能发送会话cookie. 我看到在这个问题上前面的问题,可是,仍然不能确定我的错误. 假设是错误家伙? <? ...
- IPC总结学习
写的不错. http://www.cnblogs.com/CheeseZH/p/5264465.html IPC的方式通常有管道(包括无名管道和命名管道).消息队列.信号量.共享存储.Socket.S ...
- 2015年北京大学软件project学科优秀大学生夏令营上机考试---C:单词翻转面试题
题目描写叙述:翻转句子中单词的顺序.但单词内字符的顺序不变.句子中单词以空格符隔开. 为简单起见,标点符号和普通字母一样处理.如:"I am a student."翻转成" ...