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

发布时间：2020-05-26 02:38:50 来源：网络阅读：561 作者：dxdd51568 栏目：web开发

效果：

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>

向AI问一下细节

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