可伸缩展开的级联菜单

你的名字 2022-08-26 15:12 124阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-1.11.0.js"></script>
    <title>HiddenAndShow</title>
    	<style type="text/css">
        	li {
    			list-style:none;
    			margin-left:18px;
    			display:none;
    		}
        </style>
    </head>
    
    <body>
        <ul>
          <a href="#">我是菜单1</a>
          <li><a href="#" id="load.html">我是子菜单1</a></li>
          <li><a href="#">我是子菜单2</a></li>
        </ul>
        <ul>
          <a href="#">我是菜单2</a>
          <li><a href="#">我是子菜单1</a></li>
          <li><a href="#">我是子菜单2</a></li>
        </ul>
        <div id="content"></div>
        <script type="text/javascript">
        	$(document).ready(function() {
    		  //找到所有的ul标签下面的a标签
              var as = $("ul > a");
    		  //给所有的a标签注册click事件
    		  as.click(function(){
    			//找到当前a标签同一级的兄弟节点li
    			var aNode = $(this);  
    			var lis = aNode.nextAll("li");
    			//让所有的子节点显示或者隐藏
    			lis.toggle("show");
    		  });
    		  //给li里面的a标签注册一个click事件
    		  $("li > a").click(function(){
    			$("#content").load($(this).attr("id"));  
    		  });
            });
        </script>
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，124人围观）

还没有评论，来说两句吧...

相关阅读

相关可伸缩系统的架构经验

最近，阅读了Will Larson的文章[Introduction to Architecting System for Scale][]，感觉很有价值。作者分享了他在Yaho

ゝ一世哀愁。/ 2022年09月22日 11:48/ 0 赞/ 107 阅读

相关可伸缩展开的级联菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

你的名字/ 2022年08月26日 15:12/ 0 赞/ 125 阅读

相关 javascript级联菜单实现案例（使用纯JavaScript）

<!TYPEDOC html> <html> <head> <meta charset="utf-8"> <title>级联菜单</title> </

悠悠/ 2022年08月21日 07:52/ 0 赞/ 115 阅读

相关伸缩菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

柔情只为你懂/ 2022年07月14日 11:20/ 0 赞/ 116 阅读

相关 js级联

<script type="text/javascript"> //选择地址 var cityList=new Array(); ci

桃扇骨/ 2022年07月10日 23:45/ 0 赞/ 225 阅读

相关 Javascript（四）javascript实现级联菜单

要实现这个功能，我们需要做三个步骤：定义省和对应市的数据结构。利用省份下拉框的选项改变事件onChange。根据用户选择的省份，动态添加城市下拉框的值

r囧r小猫/ 2022年05月17日 02:59/ 0 赞/ 139 阅读

相关华为云菜单栏级联效果

华为云菜单级联效果 > 之前华为云还是有这种效果的，但是目前看官网给取消掉了，网站是用jquery 操作dom 来实现的菜单联动效果，现在想用vue 来实现一遍，所以得先

叁歲伎倆/ 2022年01月20日 03:13/ 0 赞/ 200 阅读

相关 java N级级联

继上一次的递归菜单排序，这次又进行改进极大的降低了算法复杂度，基本上最低，以及完美兼容各种N级联体各种类。实现方式也更加简单。不再使用递归策略！！！这次算法很精妙，可能使某

╰+攻爆jí腚メ/ 2021年11月05日 20:30/ 0 赞/ 390 阅读

相关 jQuery--动态级联菜单

前言内容显示效果： HTML代码： CSS代码： J

拼搏现实的明天。/ 2021年09月27日 05:00/ 0 赞/ 388 阅读

相关 Bootstrap级联下拉菜单，你肯定用得到

今天我将介绍自定义的bootstrap级联下拉菜单（你肯定用得到），主要应用场合有省市级关联菜单等等，那么就先拿这个例子来讲，当然其他场景的关联菜单也同样适用。说实话，封装好一

小灰灰/ 2021年09月10日 22:02/ 0 赞/ 502 阅读