jquery控制div的滑动隐藏和显示

最新推荐文章于 2024-03-31 03:12:42 发布
最新推荐文章于 2024-03-31 03:12:42 发布
阅读量1.1w 收藏 1
点赞数
文章标签： jquery div function class button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shdhenghao3/article/details/7939269
版权 
<html>
<script type="text/javascript" src = "js/jquery.js"></script>
<script type="text/javascript" src = "js/aa.js"></script>
<script type="text/javascript" src = "js/bb.js"></script>
<head></head>
	<body>
		<?php
			for($i=0;$i<3;$i++){
				?>
				<input onclick = "blockoff(this)" class = "aa on" type = "button" value = "click0<?php echo $i; ?>"><br/>

				<div class = "cc" style = "display:none;">123</div><br/>
		<?php
			}
		?>

	</body>
</html>

aa.js

$(document).ready(function(){
	$(".aa").each(function(i){
			if($(this).hasClass("off")){
				$(this).removeClass("off").addClass("on");
				$(".cc").slideDown("normal");
			}
			else if($(this).hasClass("on")){
				$(this).removeClass("on").addClass("off");
				$(".cc").slideUp("normal");
			}
	});
$(".aa").unbind('click');
$(".aa").live('click',function(){
		var i = $(".aa").index(this);///点击的索引
		if(jQuery(this).hasClass("off")){
			$(".aa").eq(i).removeClass("off").addClass("on");
			$(".cc").eq(i).slideDown("normal");
		}
		else if(jQuery(this).hasClass("on")){
			$(".aa").eq(i).removeClass("on").addClass("off");
			$(".cc").eq(i).slideUp("normal");
		}

	});
});


bb.js

function blockoff(obj){
	$(".aa").each(function(i){
		if(obj!=this && $(this).hasClass("on")){
			$(this).trigger("click");
		}
	})
};

jquery.js是js库
 

shdhenghao3
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery滑动显示和隐藏图片效果.rar
07-05
jquery滑动显示和隐藏图片效果
JQuery中的滑动显示和隐藏
成就源于知识，知识在于积累。
03-18 1197
1、slideUp（speed， [callback]）向下滑动元素向上慢慢滑动并隐藏。 speed是可选参数表示速度，[callback]也是可选参数表示可以触发事件。 HTML代码 Hello word JQuery代码 $("#t1").slideUp("slow", function(){         alert("0000");        }); 2、slide
jQuery点击空白处隐藏弹出层
无知的博客
06-22 1404
jQuery点击空白处隐藏弹出层 $(function () { $('#btnShow').click(function (event) { //取消事件冒泡 event.stopPropagation(); //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可
jquery-控制div的显示与隐藏
x1n1010的专栏
12-01 801
jquery-控制div的显示与隐藏 $("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的   jquery中show、hide时间应用：  $().ready(function(){   $
用jquery控制div的显示与隐藏
qq_27361945的博客
03-07 1108
https://www.cnblogs.com/findumars/archive/2013/05/24/3097614.html使用jquery真的很方便，比如要控制div的显示与隐藏，一句话就搞定了，请看下面使用说明。$("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态...
jquery之超简单的div显示和隐藏特效demo(分享)
10-27
接下来，我们来看一下如何使用jQuery控制`div`元素的显示和隐藏。在JavaScript部分，定义了四个函数：`hiden()`, `slideToggle()`, `show()`, 和 `toggle()`，这些函数分别对应不同的显示和隐藏效果。 1. `hiden()`...
jquery 滑动DIV
08-12
本教程将详细讲解如何利用jQuery实现一个滑动DIV的效果，适用于图片轮播或移动端应用的界面交互。 首先，我们需要在HTML文件中创建一个包含待滑动内容的容器。这个容器可以是DIV元素，里面包含多张图片或其它内容。...
jquery+div实现同时滑动切换的图文展示特效插件下载.rar
03-23
在本插件中，jQuery被用来控制div元素的滑动动画，使得图文内容能够按照预设的方式进行平滑切换。 div元素在HTML中是一个非常基础但又灵活的容器，它可以容纳文本、图像、其他HTML元素等，用于组织页面布局。在这个...
jquery实现屏幕上方滑动显示div
05-18
本文将深入探讨如何使用 jQuery 实现屏幕上方滑动显示 div 的功能，这是一种常见的网页交互特效，可以用于通知、提示或者菜单栏的展示。 首先，我们需要在页面中引入 jQuery 库。你可以通过在 HTML 文件的 `<head>`...
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
11-24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <...$(document).ready(function
JQ的滑动效果显示
weixin_57746257的博客
06-20 652
JQ的滑动效果显示 一．滑动效果的学习 1.我们首先设置它的HTML的部分 2.再去设置它的“CSS”部分 3.我们再去设置它的JQ部分 jQuery 拥有以下滑动方法： slideDown() ：向下滑动 slideUp() ：向上滑动 slideToggle()：上下滑动切 slideDown(speed,callback)、slideUp(speed,callback)、lideToggle(speed,callback)滑动方法中，它们的参数都...
jQuery方法---滑动显示与滑动隐藏
weixin_50652993的博客
08-16 1943
jQuery方法---滑动显示与滑动隐藏一、滑动显示二、滑动隐藏三、滑动显示与滑动隐藏切换 一、滑动显示 html部分 <body> <div class="div_top">点击显示底部盒子</div> <div class="div_bottom">我是底部盒子</div> </body> css部分 .div_top{ width:200px; height:20px; background-color:skyblue
jQuery练手之滑动出现效果
超胆孤侠
10-19 237
效果概述：当鼠标移动到页面上时，出现文字说明和选择框，由于没有制作img图片，就暂时用span加背景颜色替代了。 难点：如果要展开的div是通过position:absolute绝对定位的，且通过相对与底部定位，如bottom:0px 这个时候调用slideDown就是向上展开的。 代码如下： *margin{ padding: 0;
jQuery效果——隐藏和显示、淡入淡出、滑动
青柠晶晶的博客
11-26 2791
jquery(javascript库，极大简化了javascript编程) jquery选择器 元素选择器： &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;script src="jquery(1).js"&gt;&lt;/script&gt; &lt;script type="text/j
JQ实现效果：滑动隐藏&滑动显示
xin9910的博客
07-14 3231
CHAR 4.2.2 .content{ display: none; } //滑动显示，滑动隐藏 $(function(){ $("#panel h3.head").click(function(){ $(this).next().slideToggle(300); }) }) head body is cont
JQuery操作div隐藏和显示的4种动画
ccdok123的专栏
03-05 3207
&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="author" content="wg"&gt; &lt;title&gt;Jquery-Div动画显示&lt;/title&gt; &
JQuery隐藏和显示div元素的三种方法
许三金的博客
09-14 3510
toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。hide() 方法隐藏被选元素。show() 方法显示隐藏的被选元素。该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 show()，如果一个元素是可见的，则运行 hide() - 这会造成一种隐藏和显示状态切换的效果。;;
js控制div显示隐藏
别在熬夜了！
12-24 1356
function show(){ document.getElementById("div").style.display=""; //alert(document.getElementById("div").style.display) } function hiddens(){ document.getElementById("div").style.display="none"; //ale
前端提高篇(九十八)：jQuery动画：显示与隐藏动画，简单聊聊2024年前端开发的现状和思考
最新发布
m0_60666921的博客
03-31 391
)：滑动向下显示：滑动向上隐藏：通过使用滑动效果（高度变化）来切换元素的可见状态。如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。1.给按钮绑定点击事件，点击时，box从上到下，滑动显示出来：})效果：2.给按钮绑定点击事件，点击时，box从下到上，滑动隐藏：此时初始状态是box显示，;})效果：3.给按钮绑定点击事件，点击前，如果box显示，点击后box以slideUp的方式隐藏；
jquery实现元素向下滑动隐藏
06-06
可以通过jQuery的slideDown()方法来实现元素向下滑动隐藏的效果。 HTML代码： ```html <div class="box"> 这里是要被隐藏的内容 </div> ``` CSS代码： ```css .box { height: 0; background-color: #ccc; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值