最简易的JQUERY折叠菜单有预览效果

效果：

HTML代码：

<span>第一个列表</span>

<a>第一个列表内容一</a>

<a>第一个列表内容二</a>

<a>第一个列表内容三</a>

<a>第一个列表内容四</a>

</div>

<span>第二个列表</span>

<a>第二个列表内容一</a>

<a>第二个列表内容二</a>

<a>第二个列表内容三</a>

<a>第二个列表内容四</a>

</div>

<span>第三个列表</span>

<a>第三个列表内容一</a>

<a>第三个列表内容二</a>

<a>第三个列表内容三</a>

<a>第三个列表内容四</a>

</div>

CSS代码：

.menu{ width:150px;}

.haschildren {cursor:pointer; background:#666; color:#FFF;}

div a{ display:none;float:left; width:150px;background:#ccc;} //初始化的时候隐藏所有a元素

.highlight{ color:#FFF;background:#0C3; }

JQUERY代码：

$(document).ready(function(){ //待文档加载

$(".haschildren").click(function(){ //为类为haschildren的元素添加点击事件

$(this).addClass("highlight").children("a").show().end() //当其被点击就添加一个css,样式名为highlight,并且其子元素a全部显示。

.siblings().removeClass("highlight").children("a").hide(); //于此同时它的同胞元素，也就是其他类名为children的元素，移除highlight类，且下面的a元素隐藏。

});

</script>

转载于:https://blog.51cto.com/dxdd51568/866157

最简易的JQUERY折叠菜单有预览效果相关推荐

jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单
jquery折叠菜单.jquery侧边栏菜单.CSS侧边栏菜单一.Jquery折叠菜单效果二.jquery侧边栏菜单效果三.CSS侧边栏菜单效果先上代码 <!DOCTYPE html&g ...
jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码上传图片验证 */ function submit_upload_picture() ...
jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
jquery学习2_jquery知识预览
jquery学习2_jquery知识预览 jquery版本: 大版本 1.x版本:能够兼容IE678浏览器 2.x版本:不兼容IE678浏览器 1.x和2.x版本jquery都不再更新版本了,现在只更 ...
html图片点击局部放大,jQuery教程 css+jQuery实现图片局部放大预览
本篇教程介绍了jQuery教程 css+jQuery实现图片局部放大预览,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 今天有时间开始动手,使用css+jquer ...
JQuery实现超链接和图片提示预览效果
文章目录超链接提示效果 html css jQuery部分解决问题1 解决问题2 解决问题3 完整jQuery代码图片预览 html css jQuery代码实现效果其实现在的浏览器已经具 ...
form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果
作为一个初入前端的菜鸟,最近因为一个无刷新上传图片问题走了很多弯路,所以在这里给大家分享一下,不足之处希望谅解.无刷新上传图片一般有两种方式,一种是 form 表单+iframe ,还有一种是 aja ...
鼠标移到到图片，图片向上滑动预览效果
<!DOCTYPE html> <html> <head><title>鼠标移到到图片,图片向上滑动预览效果</title><scri ...

最简易的JQUERY折叠菜单有预览效果

最简易的JQUERY折叠菜单有预览效果相关推荐

最新文章

热门文章

最简易的JQUERY折叠菜单 有预览效果

最简易的JQUERY折叠菜单 有预览效果相关推荐

最新文章

热门文章

最简易的JQUERY折叠菜单有预览效果

最简易的JQUERY折叠菜单有预览效果相关推荐