jquery 菜单效果一个

最新推荐文章于 2023-03-28 14:14:30 发布

cnsd007

最新推荐文章于 2023-03-28 14:14:30 发布

阅读量85

点赞数

分类专栏： JavaScript 文章标签： jQuery CSS JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/cnsd007/article/details/83724017

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<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>