<!DOCTYPE html><html><head><meta charset="utf-8" /><title>jQuery实现下拉菜单(点击显示/隐藏)</title><link rel="stylesheet" href="css/index.css"><style>.item {height: auto;width: 100px;border: 1px solid black;cursor: pointer;color: #000;}ul[class^='in_menu']{display: none;}.in_items {background-color: #cecece;border-top: 1px solid black;/* 文字样式 */padding-left: 8px;cursor: pointer;}</style></head><body><ul><li class="item"><span>点击展开</span><ul class="in_menu-1"><!-- 每个隐藏菜单class不能完全相同,此处递增 --><li class="in_items">内容文字</li><li class="in_items">内容文字</li><li class="in_items">内容文字</li></ul></li><li class="item"><span>点击展开</span><ul class="in_menu-2"><!-- 每个隐藏菜单class不能完全相同,此处递增 --><li class="in_items">内容文字</li><li class="in_items">内容文字</li><li class="in_items">内容文字</li></ul></li><li class="item"><span>点击展开</span><ul class="in_menu-3"><!-- 每个隐藏菜单class不能完全相同,此处递增 --><li class="in_items">内容文字</li><li class="in_items">内容文字</li><li class="in_items">内容文字</li></ul></li></ul></body></html><!-- 引入jQuery库 --><script src="js/jquery-3.6.1.js"></script><!-- 本地位置 --><script src="/jquery-latest.js"></script><!-- 网络位置 --><script>$(".item").on("click", function() {const a = $("." + this.children[1].className); //获取元素 ul[class^='in_menu']// 显示/隐藏方法a.toggle(150);});$(".in_items").on("click", function() {//阻止显示方法冒泡event.stopPropagation();});</script>
