弹出菜单(jquery应用2)

最新推荐文章于 2022-04-01 09:07:11 发布

kandy_java

最新推荐文章于 2022-04-01 09:07:11 发布

阅读量641

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/u010866487/article/details/9000939

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用jQuery创建弹出菜单。主要内容包括编写HTML文件（jqueryMenu.html）、CSS样式（menu.css）和JavaScript（jqueryMenu.js）。逻辑是点击一级菜单时，相应二级菜单会显示或隐藏。文章还提到了两个完善点：一是点击一级菜单的任意位置都会触发事件，二是二级菜单可以链接到其他页面并在当前页面指定区域显示内容，类似于iframe功能。

摘要由CSDN通过智能技术生成

A:编写html文件：jqueryMenu.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet"  type="text/css" href="css/menu.css">
<script type="text/javascript" src="js/jquery-1.4.js"></script>
<script type="text/javascript" src="js/jqueryMenu1.js"></script>
<title>Insert title here</title>
</head>
<body>
<ul><a href="#">江苏省</a>
 <li><a href="#" id="test1.html">南京市</a></li>
 <li><a href="#" id="test2.html">扬州市</a></li>
</ul>


<ul><a href="#">四川省</a>
 <li><a href="#" id="test3.html">成都市</a></li>
 <li><a href="#" id="test4.html">绵阳市</a></li>
</ul>
<div id="content"></div>
</body>
</html>

B:编写css:menu.css

li{
  /*去掉li标签的小点*/
  list-style:none; 
  /*将二级菜单缩进*/
  margin-left: 10px;
  /*默认二级菜单隐藏*/
  display: none;
}

C:编写js:jqueryMenu.js

    逻辑：
    当单击一级菜单，对应的子菜单如果隐藏，就让其显示，否则让其隐藏
    解决方法：
    在装载页面的时候为所有的一级菜单绑定onclick事件，保证在单击一级菜单时，显示或隐藏二级菜单
    完善点1：在单击ul节点的任意位置都会触发onclick事件
    完善点2：给二级菜单加上链接。单击该链接后，将另一个页面的内容显示到改页面的一个区域下，
                  相当于iframe的功能。
    jqueryMenu.js--->jqueryMenu1.js

//页面加载时会执行的方法(类似于onload事件 document.οnlοad=function)
$(document).ready(function(){
       //alert(1);

 //找到所有的a元素集合
 var as=$("ul>a");
 //alert(uls.length);

 //为每一个a节点绑定click事件
 as.click(function(){
     //获取当前点击的a节点
  var aNode=$(this);
  //获取该a节点下所有的同级li节点
  var lis=aNode.nextAll("li");
  
  lis.toggle("slow");
 })
 
 //给二级菜单绑定click事件
 $("li>a").click(function(){
 //将相关页面加载到content节点的div显示 
  var contentDiv =$("#content");
  // alert($(this).attr("id"));
  contentDiv.load($(this).attr("id"));
 })
});