JQuery实现slideToggle（）滑动的效果

当鼠标点击图标时，文本内容隐藏起来，

HTML代码

<div class="global_module news"><h3>最新动态</h3><div class="scrollNews"><ul><li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li><li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li><li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li><li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li><li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li><li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li><li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li></ul></div><p class="module_up_down"><img src="data:images/down.gif" alt="" /></p></div><div class="global_module procatalog"><h3>产品分类</h3><ul class="m-treeview"><li class="m-expanded"><span>衬衫</span><ul><li><span>短袖衬衫</span></li><li><span>长袖衬衫</span></li></ul></li><li class="m-expanded"><span>卫衣</span><ul><li><span>开襟卫衣</span></li><li><span>套头卫衣</span></li></ul></li><li class="m-expanded"><span>裤子</span><ul><li><span>休闲裤</span></li><li><span>免烫卡其裤</span></li><li><span>牛仔裤</span></li><li><span>短裤</span></li></ul></li></ul><p class="module_up_down"><img src="data:images/down.gif" alt="" /></p></div></div>

JQuery代码

$(function(){
//最新动态的上下滑动
//获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。           //slideUp:通过高度变化（向上减小）来动态地隐藏所有匹配的元素
//slideDown:通过高度变化（向下增大）来动态地显示所有匹配的元素
//toggle:用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。           //最新动态的div的class p标签的图片
$(".scrollNews+p img").toggle(function () {
//匹配元素的向上滑动               $(".scrollNews").slideUp();               //当前元素的向上图片               $(this).attr("src", "images/up.gif");
//匿名
}, function () {
//匹配元素的向下滑动
$(".scrollNews").slideDown();
//当前元素的向下图片
$(this).attr("src", "images/down.gif");
});
//通过高度变化（向上减小）来动态地隐藏所有匹配的元素
$(".m-treeview+p img").toggle(function () {
//元素的向上的
$(".m-treeview").slideUp();               //当前元素的向上图片               $(this).attr("src", "images/up.gif");
}, function () {
//匹配元素的向下滑动               $(".m-treeview").slideDown();
//当前元素的向下图片
$(this).attr("src", "images/down.gif");           });//产品分类的上下滑动
//siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
//元素ul li span的匿名事件
$(".m-treeview>li>span").click(function () {
//赋一个ul的值               var ul = $(this).siblings("ul");
//visible:获得匹配元素的当前值               //parent:在给定的父元素下匹配所有的子元素               //判断ul中li当前的值
if (ul.is(":visible")) {
//当前父元素下的所有子元素隐藏
$(this).parent().attr("class", "m-collapsed");
ul.hide();
} else {
//当前父元素下的所有子元素显示                   $(this).parent().attr("class", "m-expanded");                   ul.show();
}
return false;           });
});

JQuery实现slideToggle（）滑动的效果相关推荐

jQuery 使用slideToggle()滑动显示隐藏
slideToggle() 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数. 这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐藏或显示 ...
html滑动逐渐覆盖效果,创意jQuery和CSS3滑动覆盖响应式幻灯片特效
这是一款非常有创意的jQuery和CSS3滑动覆盖响应式幻灯片特效.该幻灯片特效采用响应式设计,在幻灯片切换时使用一个滑动块状区域来进行覆盖,显示新的幻灯片内容,整体效果非常不错. 使用方法 HTML ...
html 滑动导航效果,jQuery实现的滑块滑动导航效果示例
本文实例讲述了jQuery实现的滑块滑动导航效果.分享给大家供大家参考,具体如下: www.jb51.net jquery滑动导航 *{margin: 0;padding: 0;box-sizing: ...
vue之动画( 仿jquery的slideToggle动画效果 )
Vue提供了transition组件,写法: <transition name="box"></transition> 在进入/离开的过渡中,会有 6 个 ...
深入学习jQuery的三种常见动画效果
前面的话动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画是一个大的系列,本文将详细介绍jQuery的三种常见动画效 ...
animate 实现滑动切换效果
今天和大家分享一下用 animate 实现滑动切换效果的小例子 ------- 来自<一只有梦想的前端小白> 大家都知道jQuery 提供的有一下几种方法能够实现滑动效果: slideDo ...
用jQuery实现下拉菜单效果
用jQuery实现下拉菜单效果下拉菜单效果展示代码 <!DOCTYPE html> <html><head>`在这里插入代码片`<meta charset ...
php框架加滑动条,IOS_iOS实现双向滑动条效果，最近做项目，碰到一种双向滑 - phpStudy...
iOS实现双向滑动条效果最近做项目,碰到一种双向滑动条,自己实现了一下,随便写一下思路,方便以后开发,避免重复写代码,以后粘贴就行了.封装了一下,代码如下: #import typedef NSSt ...
手机端图片滑动切换效果
最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环 ...
angularjs与jquery特效slidetoggle结合
之前使用jquery的slidetoggle方法,可以轻易的实现元素的收缩展开:使用angularjs后,没有找到相关的方法,通过多方面查资料,自己写了个demo,展示slidetoggle的angu ...

JQuery实现slideToggle（）滑动的效果

JQuery实现slideToggle（）滑动的效果相关推荐

最新文章

热门文章