JQuery 横向纵向菜单_jquery 纵向分布按钮-优快云博客

本文介绍了一个使用JQuery实现的菜单效果案例，包括了基本的HTML结构定义、样式设置及交互逻辑实现。通过点击或悬停操作展示隐藏子菜单，并伴有平滑动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>JQuery实战-菜单效果</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link type="text/css" rel="stylesheet" href="css/menu.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
  <ul>
   <li class="main">
     <a href="#">菜单项1</a>
    <ul>
     <li>
      <a href="#">子菜单项11</a>
     </li>
     <li>
      <a href="#">子菜单项12</a>
     </li>
    </ul>
   </li>
   <li class="main">
    <a href="#">菜单项2</a>
    <ul>
     <li>
      <a href="#">子菜单项21</a>
     </li>
     <li>
      <a href="#">子菜单项22</a>
     </li>
    </ul>
   </li>
   <li class="main">
    <a href="#">菜单项3</a>
    <ul>
     <li>
      <a href="#">子菜单项31</a>
     </li>
     <li>
      <a href="#">子菜单项32</a>
     </li>
    </ul>
   </li>
  </ul>
  <br />
  <br />
  <br />
  <ul>
   <li class="hmain">
     <a href="#">菜单项1</a>
    <ul>
     <li>
      <a href="#">子菜单项11</a>
     </li>
     <li>
      <a href="#">子菜单项12</a>
     </li>
    </ul>
   </li>
   <li class="hmain">
    <a href="#">菜单项2</a>
    <ul>
     <li>
      <a href="#">子菜单项21</a>
     </li>
     <li>
      <a href="#">子菜单项22</a>
     </li>
    </ul>
   </li>
   <li class="hmain">
    <a href="#">菜单项3</a>
    <ul>
     <li>
      <a href="#">子菜单项31</a>
     </li>
     <li>
      <a href="#">子菜单项32</a>
     </li>
    </ul>
   </li>
  </ul>
</body>
</html>

menu.css

ul, li {
/*清除ul和li上默认的小圆点*/
list-style: none;
}
ul {
/*清除子菜单的缩进值*/
padding: 0;
margin: 0;
}
.main, .hmain {
background-image: url(../images/title.gif);
background-repeat: repeat-x;
width: 120px;
}
li {
background-color: #EEEEEE;
}
a {
/*取消所有的下划线*/
text-decoration: none;
padding-left: 20px;
display: block;
display: inline-block;
width: 100px;
padding-top: 3px;
padding-bottom: 3px;
}
.main a, .hmain a {
color: white;
background-image: url(../images/collapsed.gif);
background-repeat: no-repeat;
background-position: 3px center;
}
.main li a, .hmain li a {
color: black;
background-image: none;
}
.main ul, .hmain ul {
display: none;
}
.hmain {
float: left;
margin-right: 1px;
}

menu.js

$(document).ready(function(){
//页面中的DOM已经装载完成时，执行的代码
$(".main > a").click(function(){
  //找到主菜单项对应的子菜单项
  var ulNode = $(this).next("ul");
  /*
  if (ulNode.css("display") == "none") {
   ulNode.css("display","block");
  } else {
   ulNode.css("display","none");
  }
  */
  //ulNode.show("slow");//normal fast
  //ulNode.hide();
  //ulNode.toggle();
  //
  //ulNode.slideDown("slow");
  //ulNode.slideUp;
  ulNode.slideToggle();
  changeIcon($(this));
});
$(".hmain").hover(function(){
  $(this).children("ul").slideDown();
  changeIcon($(this).children("a"));
},function(){
  $(this).children("ul").slideUp();
  changeIcon($(this).children("a"));
});
});

/**
* 修改主菜单的指示图标
*/
function changeIcon(mainNode) {
if (mainNode) {
  if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
   mainNode.css("background-image","url('images/expanded.gif')");
  } else {
   mainNode.css("background-image","url('images/collapsed.gif')");
  }
}
}