收藏三款jquery实现折叠菜代码

收藏三款jquery实现折叠菜代码
本人喜欢收藏一些jquery效果代码，今天我收藏三款jquery实现折叠菜代码哦，如果你正使用这种效果，这些折叠菜单效果实例能帮助到你的哦。
<html>
<head>
<title>伸缩的菜单，用jquery重写</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:arial;
}
#navigation > ul {
list-style-type:none;    /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ed9f9f; /* 添加下划线 */
}
#navigation > ul > li > a{
display:block;      /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#ffffff;
}
#navigation > ul > li > a:hover{ /* 鼠标经过时 */
background-color:#990020;   /* 改变背景色 */
color:#ffff00;      /* 改变文字颜色 */
}

/* 子菜单的css教程样式 */
#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ed9f9f;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#ffffff;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
#navigation ul li ul.myhide{ /* 隐藏子菜单 */
display:none;
}
/*
不再需要myshow样式
#navigation ul li ul.myshow{
display:block;
}
*/
-->
</style>
<script language="网页特效" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//找到所有li标记中包含的ul标记
//然后找到它的前一个标记（即<a>），并添加click()事件
$("li").find("ul").prev().click(function(){
//点击<a>时让它后面的兄弟（即<ul>）切换css样式
$(this).next().toggleclass("myhide");
});
});
/*
//替换原来的例题
function change(){
$(this).parent().find("ul").toggleclass("myhide");
//通过父元素li，找到兄弟元素ul
var oseconddiv = this.parentnode.getelementsbytagname("ul")[0];
//css交替更换来实现显、隐
if(oseconddiv.classname == "myhide")
oseconddiv.classname = "myshow";
else
oseconddiv.classname = "myhide";
}
window.onload = function(){
$("li").find("ul").prev().click(change);
/*var oul = document.getelementbyid("listul");
var ali = oul.childnodes; //子元素
var oa;
for(var i=0;i<ali.length;i++){
//如果子元素为li，且这个li有子菜单ul
if(ali[i].tagname == "li" && ali[i].getelementsbytagname("ul").length){
   oa = ali[i].firstchild; //找到超链接
   oa.onclick = change; //动态添加点击函数
}
}
}*/
</script>
</head>
<body>
<div id="navigation">
<ul id="listul">
<li><a href="#">home</a></li>
<li><a href="#">news</a>
         <ul class="myhide">
             <li><a href="#">lastest news</a></li>
                <li><a href="#">all news</a></li>
            </ul>
        </li>
<li><a href="#">sports</a>
         <ul class="myhide">
             <li><a href="#">basketball</a></li>
                <li><a href="#">football</a></li>
                <li><a href="#">volleyball</a></li>
            </ul>
        </li>
<li><a href="#">weather</a>
         <ul class="myhide">
             <li><a href="#">today's weather</a></li>
                <li><a href="#">forecast</a></li>
            </ul>
        </li>
<li><a href="#">contact me</a></li>
</ul>
</div>
</body>
</html>

实例折叠菜单二

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

  $("#menu_1").click(function() {
   $(this).css("background","url(../img/menu-fouce_03.jpg) no-repeat");
   $(".main_2>a").css("background","none");
   $(".main_2>ul").slideup("slow");

  });

  $(".main_2 ul").children(1).find("a").hover(function() {
   $(this).css("background","url(img/sub-menu-fouce-bg_03.jpg) no-repeat");
  },function(){
   $(this).css("background","none");
  });
  $(".main_2>a").click(function() {
   $("#menu_1").css("background","none")
   var ulnode=$(this).next("ul");
   $(".main_2>ul").slideup("slow");
           ulnode.slidetoggle("slow");
  });
  $(".main_2>a").hover(function() {
   $(this).css("background","url(img/menu-fouce-down_03.jpg) no-repeat");
  },function() {
   $(this).css("background","url(img/menu_bg_03.gif) no-repeat");
  });

});
</script>
</head>
<body>
<ul>
  <li class="main_1">
   <a href="####" id="menu_1"><img src="img/b_1_03.png" width="22" height="17" align="middle"/>首页</a>
  </li>
  <li class="main_2">
   <a href="####"><img src="img/b_2_03.png" width="18" height="20" align="middle"/>人员管理</a>
   <ul>
    <li><a href="####">售点管理</a></li>
    <li><a href="####">申请数据管理</a></li>
    <li><a href="####">售点访问频率设置</a></li>
    <li><a href="####">片区业务员设定</a></li>
    <li><a href="####">导入售点信息</a></li>
   </ul>
  </li>
  <li class="main_2">
   <a href="####"><img src="img/b_3_03.png" width="22" height="18" align="middle"/>报表统计</a>
   <ul>
    <li><a href="####">售点管理</a></li>
    <li><a href="####">申请数据管理</a></li>
    <li><a href="####">售点访问频率设置</a></li>
   </ul>
  </li>



      jquery折叠菜单实例三

      <!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<title>无标题文档</title>
<head>
   <script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
   <style type="text/css">
.menu_list {
width: 150px;
}

.menu_head {
padding: 8px 10px;
cursor: pointer;
position: relative;
margin: 1px;
font-weight: bold;
background: #93cdff;
}

.menu_body {
display: none;
}

.menu_body a {
padding: 8px 0px;
display: block;
color: #006699;
background-color: #efefef;
padding-left: 10px;
font-weight: bold;
text-decoration: none;
}

.menu_body a:hover {
color: #7fb2f4;
background-color: #dfdfdf;
text-decoration: underline;
}
</style>
   <script type="text/javascript">
$(function(){
            $("#firstpane p.menu_head").click(function()
            {
                $(this).next("div.menu_body").slidetoggle(300).siblings("div.menu_body").slideup("slow");
            });
            $("#firstpane p.menu_head").mouseo教程ver(function()
            {
               $(this).css({background:"#2286c6"});
            });
            $("#firstpane p.menu_head").mouseout(function()
            {
               $(this).css({background:"#93cdff"});
            });
        });s
</script>
</head>

http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

补充：网页制作,jquery