【jQuery】实现菜单切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.menu {
width: 200px;
height: 800px;
border: 1px solid red;
}
.menu .header {
background-color: gold;
padding: 10px 5px;
border-bottom: 1px dotted #dddddd;
cursor: pointer;
/* cursor CSS 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。 */
}
.menu .content a {
display: block;
padding: 5px 5px;
text-decoration: none;
color: black;
border-bottom: 1px dotted #dddddd;
}
.hide {
display: none;
}
</style>
<script src="https://cdnjs.quickso.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<div class="menu">
<div class="item">
<div class="header" onclick="clickMe(this)">免费服务</div>
<div class="content hide">
<a href="">免费CDN</a>
<a href="">免费域名</a>
<a href="">免费服务器</a>
<a href="">免费模版</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this)">付费服务</div>
<div class="content hide">
<a href="">CDN</a>
<a href="">域名</a>
<a href="">服务器</a>
<a href="">模版</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this)">免费服务2</div>
<div class="content hide">
<a href="">免费CDN</a>
<a href="">免费域名</a>
<a href="">免费服务器</a>
<a href="">免费模版</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this)">付费服务2</div>
<div class="content hide">
<a href="">CDN</a>
<a href="">域名</a>
<a href="">服务器</a>
<a href="">模版</a>
</div>
</div>
</div>
<script>
function clickMe(self) {
// $(self) ->当前单击的标签
// 判断有没有 .hasClass(）
// 删除样式 $(self).next().removeClass()
// 添加 .addClass(）
//
//让自己下面的功能展示出来
$(self).next().removeClass("hide");
// 找父亲，父亲的所有兄弟，在去每个兄弟的子孙中寻找 class=content，添加hide
$(self).parent().siblings().find(".content").addClass("hide");
// var hasHide = $(self).next().hasClass("hide");
// if (hasHide) {
// } else {
// $(self).next().addClass("hide");
// }
}
</script>
</body>
</html>
作者：木子欢儿
出处：https://www.cnblogs.com/HGNET/p/17223770.html
版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
部分文章来源于网络，如疏漏未标注原文地址或侵权，请联系进行删除。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
2020-03-16 【C语言】求球的表面积和体积