jquery 菜单效果一个

bjqincy

浏览: 229956 次
性别:
来自: beijing

最近访客更多访客>>

summer_1988

a395862870

visionlzs

hacker10086

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

jQuery CSS JavaScript HTML

<html>
    <head>
        <script language="javascript" src="../jquery/jslib/jquery-1.4.2.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");  // 仅仅显示当前的菜单 
			   //$(this).next("div.menu_body").slideToggle(300); // 多个菜单显示
         
            });   
            $("#firstpane p.menu_head").mouseover(function()   
            {   
               $(this).css({background:"#2286c6"});   
            });   
            $("#firstpane p.menu_head").mouseout(function()   
            {   
               $(this).css({background:"#93cdff"});   
            });   
        });s   
</script>  
</head>  
  
<body>  
<div id="firstpane" class="menu_list">  
  <p class="menu_head">菜单1</p>  
    <div class="menu_body">  
    <a href="#">子菜单1</a>  
    <a href="#">子菜单2</a>  
    <a href="#">子菜单3</a>  
    </div>  
 <p class="menu_head">菜单2</p>  
    <div class="menu_body">  
    <a href="#">子菜单1</a>  
    <a href="#">子菜单2</a>  
    <a href="#">子菜单3</a>  
    </div>  
<p class="menu_head">菜单3</p>  
    <div class="menu_body">  
    <a href="#">子菜单1</a>  
    <a href="#">子菜单2</a>  
    <a href="#">子菜单3</a>  
    </div>  
<p class="menu_head">菜单4</p>  
    <div class="menu_body">  
    <a href="#">子菜单1</a>  
    <a href="#">子菜单2</a>  
    <a href="#">子菜单3</a>  
    </div>  
</div>  
</body>  
</html>

分享到：

掉字段内容包含的空格 | 无聊的jsti 的fn 函数（资料备份）

2010-09-26 16:02
浏览 1166
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery 菜单效果一个

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery 菜单效果一个

评论

发表评论

相关推荐

重写openalyers 的方法，加载天地图瓦片数据

ArcGIS客户端API中加载大量数据的几种解决办法

table_border.html

ExtJs layout

验证验证

jquery validate.js x学习

CSS 定义鼠标的样式

学习AJAX框架后的理解

jquey中的$符号与其他框架的$的冲突解决方法

IE6下div不能将select框遮住

DHTMLX框架AJAX

关于页面的传值

jQuery 的CSS属性

jQuery 理解

jquery理解

内存泄露与闭包

JavaScript的跨域问题

使用dtmlxGrid 未知运行的错误。与显示不出来的情况

javaScript 中 call 函数与apply的用法说明

javascript 中this 的用法

最近访客更多访客>>