用jquery 实现下拉菜单_jquery 实现点击文本框出现下拉员工树-优快云博客

本文链接：https://blog.youkuaiyun.com/Ami121/article/details/3176239

本文介绍了一个使用jQuery实现的下拉菜单示例。该菜单具备展开与收起功能，并通过CSS美化了样式。通过点击标题可以显示或隐藏对应的菜单项。

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

  自己在研究学习jquery时编写的一个下拉菜单 
 
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jackami121@gmail.com</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".accordion p").hide();
    $(".accordion p:eq(0)").show();
    $(".accordion p:eq(3)").show();
    $(".accordion p:eq(6)").show();
    $(".accordion h3").toggle(function(){
        $(this).next("p").show(1200);
        $(this).find("img").attr("src","images/up.png");
        },function(){
        $(this).next("p").hide(1200);
        $(this).find("img").attr("src","images/down.png");
        });
});
</script>
<style type="text/css">
body {margin-left:16%;padding:0px;font:12px Arial, Helvetica, sans-serif; margin-right:10%; }
.accordion {width: 20%;margin:auto;border-bottom: solid 1px #B1E0F4; }
.accordion h3 {background: #87ceeb url(images/arrow-square.gif) no-repeat right -51px;
    padding: 7px 15px;margin:0;
    font: bold 14px Arial, Helvetica, sans-serif;
    border: solid 1px #B1E0F4;border-bottom: none;cursor: pointer;}
.accordion h3:hover {background:#B1E0F4 url(images/arrow-square.gif) no-repeat right -51px; }
.accordion h3.active {background-position: right 5px}
.accordion p {background: #ffffff;margin:0;padding:0;border-left: solid 1px #87ceeb;border-right: solid 1px #87ceeb;}
p a {display:block;width:100%;line-height:36px;text-indent:16px;color:#000;text-decoration:none}
p a:hover {background:#069;color:#ffffff;font-weight:bold}
</style>
</head>
<body STYLE='OVERFLOW:SCROLL;OVERFLOW-X:HIDDEN;OVERFLOW-Y:HIDDEN'>
<div class="accordion">
 
<h3>主页管理        <img src="images/up.png"></h3>
    <p><a href="/jsp/soway.jsp" target="ContentFrame">主页 </a></p>
    <h3>用户管理        <img src="images/down.png"></h3>
    <p>
    <a href="#" target="ContentFrame">修改密码 </a>
    <a href="#" target="ContentFrame"> 用户信息修改 </a>
    <a href="#" target="ContentFrame"> 增加删除用户 </a>
    <a href="#" target="ContentFrame">登陆日志查询</a>
    </p>
    <h3>用户设置        <img src="images/down.png"></h3>
    <p>
    <a href="#" target="ContentFrame">查看</a>
    <a href="#" target="ContentFrame">设置</a>
    </p>
    <h3>装置管理        <img src="images/up.png"></h3>
    <p>
    <a href="#" target="ContentFrame"> 添加/删除装置 </a>
    <a href="#" target="ContentFrame"> 查看装置信息 </a>
    <a href="#" target="ContentFrame">修改装置信息</a>
    </p>
    <h3>文件下载        <img src="images/down.png"></h3>
    <p>
    <a href="#" target="ContentFrame">事件型文件</a>
    <a href="#" target="ContentFrame">统计型文件</a>
    </p>
    <h3>事件数据        <img src="images/down.png"></h3>
    <p>
    <a href="#" target="ContentFrame">最近事件TOP10</a>
    <a href="#" target="ContentFrame">严重事件TOP10</a>
    <a href="#" target="ContentFrame">事件查询</a>
    </p>
    <h3>统计数据        <img src="images/up.png"></h3>
    
    <p>
    <a href="#" target="ContentFrame"> 统计图 </a>
    <a href="#" target="ContentFrame"> 国标统计报表 </a>
    <a href="#" target="ContentFrame">超标数据查询</a>
    </p>
    <h3>安全退出        <img src="images/down.png"></h3>
    <p>
    <a href="#" target="_parent" onclick="top.sidebarFrame.close()">安全退出 </a>
    </p>
</div>
</body>
</html>
效果图



 