未被点击的关闭"/>
简单jq实现点击展开再次点击关闭，点击展开，未被点击的关闭
注意事项
二级目录一定要在一级目录包裹着
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src=".0.0/jquery.min.js"></script><title>点击展开再次点击关闭</title>
</head><body><div class="_Fu"><a href="javasrcipt:;"><span>一级目录</span></a><ul class="_Zi"><li><a href="#">二级</a></li><li><a href="#">二级</a></li><li><a href="#">二级</a></li></ul></div><div class="_Fu"><a href="javasrcipt:;"><span>一级目录</span></a><ul class="_Zi"><li><a href="#">二级</a></li><li><a href="#">二级</a></li><li><a href="#">二级</a></li></ul></div><div class="_Fu"><a href="javasrcipt:;"><span>一级目录</span></a><ul class="_Zi"><li><a href="#">二级</a></li><li><a href="#">二级</a></li><li><a href="#">二级</a></li></ul></div>
</body><script>// 调用方法k73('._Fu', '._Zi')// 第一个值是父元素第二个值是子元素function k73(idParent, idSon) {let parent = $(idParent);let son = $(idSon);son.hide();parent.first().find(son).show();//让第一个初始的时候展开parent.on('click', function (event) {if ($(this).find(son).is(':hidden')) {parent.find(son).hide(300);// 关闭其他$(this).find(son).show(300);// 显示自己} else {$(this).find(son).hide(300);// 关闭自己}event.preventDefault();});}
</script>
</html>如果你不喜欢在其他js页面写在调用的话把js部分替换成这样
需要更换成其他事件的话讲click换成对应事件即可
var parent = $('._Fu');var son = $('._Zi');son.hide();parent.first().find(son).show();//让第一个初始的时候展开parent.on('click', function (event) {if ($(this).find(son).is(':hidden')) {parent.find(son).hide(300);// 关闭其他$(this).find(son).show(300);// 显示自己} else {$(this).find(son).hide(300);// 关闭自己}event.preventDefault();});
更多推荐
简单jq实现点击展开再次点击关闭,点击展开,未被点击的关闭
发布评论