用jQuery制作下拉菜单

 时间:2026-02-15 05:29:53

1、首先,新建一个html文档,代码如下:

<html>

<head>

<script type="text/javascript" src="jq/jquery-1.12.1.min.js"></script>

</head>

<body>

<a id="ss">个人中心</a>

<ul id="hh">

<li><a href="#">买卖情况</a></li>

<li><a href="#">在线物流</a></li>

<li><a href="#">售后服务</a></li>

</ul>

</body>

</html> 

效果如图:

用jQuery制作下拉菜单

2、接下来,写JavaScript,代码如下:

<script type="text/javascript">

$(document).ready(function(){

  $("#ss").click(function(){

  $("#hh").toggle();

  });

});

</script>

效果如图:

用jQuery制作下拉菜单

用jQuery制作下拉菜单

用jQuery制作下拉菜单

3、<script type="text/javascript">

$(document).ready(function(){

  $("#ss").click(function(){

  $("#hh").toggle();

  });

});

</script>

代码分析:$(document).ready(function()表示文档就绪是执行一个匿名函数, $("#ss").click(function()表示ID为ss的元素被点击时执行一个匿名函数,

  $("#hh").toggle();这句表示ID为hh的元素来回显示。

  • Jquery如何制作下拉菜单
  • Bootstrap如何制作下拉菜单
  • jQuery搜索框下拉菜单选择
  • 什么是jquery
  • jQuery搜索框下拉菜单选择插件
  • 热门搜索
    华东五市旅游景点 宁夏旅游政务网 黄冈旅游景点大全 杭州旅游指南 青岛旅游图片 济源旅游景点大全 江西上饶旅游 春节 旅游 旅游年卡一卡通景点 石家庄旅游景点排行