首页 > 编程知识 正文

JS三级联动下拉列表,jquery一级菜单显示二级菜单

时间:2023-05-03 05:29:03 阅读:173227 作者:2508

! doctype html public '-//W3C//dtd XHTML 1.0 transitional//en ' ' http://www.w3.org/tr/XHTML1/dtd/XHTML1- transansitional charset=utf-8' /title无题文档/titlelinkhref=' CSS/my menu.CSS ' rel=' style sheet ' type=' text/CSS '/scrips JavaScript'$(function () /导航切换$ ) (.menuson.header (.click ).function ) ) var$ $ ().Menusonli.active $parent.addclass('active ); if (! $(this ).next ) ).suB-Menus ).size ) ) if ) $parent.Hasclass ) ) open ) ) $parent.removeclass ) ) open ) }}; //三级菜单$ ).suB-MenusLi ' ).click(function(e ) ) $ ).suB-MenusLi.active ' ).removeclass ) ) (active ) $ ().title ).click ) function ) var$ul=$(this ).next ) ) ul ); $(DD ) ).find ).Menuson ) ).slideUp ); if($ul.is(:visible ) ) $ ) this ).next ).Menuson ).slideUp ); (else($ ) this ).next ) '.Menuson ' ).slideDown ); }; ); }/script/head body style=' background : # f0f9fd; ' div class='lefttop'span/span菜单/divdlclass=' left menu ' dddivclass=' title ' span img src=' images/left ico 01.png divulclass=' menuson ' Li class=' active ' divclass=' header ' cite/citeahref=' index.html ' target ' 01-001-02/a/lilia href=' JavaScript 3360; ' 001-001-03/a/li

<li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="javascript:;">001-001-04</a></li> </ul> </li> <li> <div class="header"> <cite></cite> <a rel="external nofollow" href="right.html" target="rightFrame">001-002</a> <i></i> </div> <ul class="sub-menus"> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="javascript:;">001-002-01</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="javascript:;">001-002-02</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="javascript:;">001-002-03</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="javascript:;">001-002-04</a></li> </ul> </li> </ul> </dd> <dd> <div class="title"> <span><img src="images/leftico02.png" /></span>002 </div> <ul class="menuson"> <li><cite></cite><a rel="external nofollow" href="flow.html" target="rightFrame">002-001</a><i></i></li> <li><cite></cite><a rel="external nofollow" href="project.html" target="rightFrame">002-002</a><i></i></li> <li><cite></cite><a rel="external nofollow" href="search.html" target="rightFrame">002-003</a><i></i></li> <li><cite></cite><a rel="external nofollow" href="tech.html" target="rightFrame">002-004</a><i></i></li> </ul> </dd> </dl></body></html> @charset "utf-8";/* CSS Document *//*** * uimaker * http://www.uimaker.com * e-mail: admin@uimaker.com */*{font-size:9pt;border:0;margin:0;padding:0;}body{font-family:'微软雅黑'; margin:0 auto;min-width:980px;}ul{display:block;margin:0;padding:0;list-style:none;}li{display:block;margin:0;padding:0;list-style: none;}img{border:0;}dl,dt,dd,span{margin:0;padding:0;display:block;}a,a:focus{text-decoration:none;color:#000;outline:none;blr:expression(this.onFocus=this.blur());}a:hover{color:#00a4ac;text-decoration:none;}table{border-collapse:collapse;border-spacing: 0;}cite{font-style:normal;}h2{font-weight:normal;}/*left.html*/.lefttop{background:url(../images/lefttop.gif) repeat-x;height:40px;color:#fff;font-size:14px;line-height:40px;}.lefttop span{margin-left:8px; margin-top:10px;margin-right:8px; background:url(../images/leftico.png) no-repeat; width:20px; height:21px;float:left;}.leftmenu{width:187px;padding-bottom: 9999px;margin-bottom: -9999px; overflow:hidden; background:url(../images/leftline.gif) repeat-y right;}.leftmenu dd{background:url(../images/leftmenubg.gif) repeat-x;line-height:35px;font-weight:bold;font-size:14px;border-right:solid 1px #b7d5df;}.leftmenu dd span{float:left;margin:10px 8px 0 12px;}.leftmenu dd .menuson{display:none;}.leftmenu dd:first-child .menuson{display:block;}.menuson {line-height:30px; font-weight:normal; }.menuson li{cursor:pointer;}.menuson li.active{position:relative; background:url(../images/libg.png) repeat-x; line-height:30px; color:#fff;}.menuson li cite{display:block; float:left; margin-left:32px; background:url(../images/list.gif) no-repeat; width:16px; height:16px; margin-top:7px;}.menuson li.active cite{background:url(../images/list1.gif) no-repeat;}.menuson li.active i{display:block; background:url(../images/sj.png) no-repeat; width:6px; height:11px; position:absolute; right:0;z-index:10000; top:9px; right:-1px;}.menuson li a{ display:block; *display:inline; *padding-top:5px;}.menuson li.active a{color:#fff;}.title{cursor:pointer;}/**支持二级菜单覆盖样式**/.menuson li .header{height:30px;}.menuson li .sub-menus{ display:none; background:#d9ebf3;padding:10px 0;border-bottom:1px solid #b7d5df;}.menuson li .sub-menus li{height:25px;line-height:25px;padding-left:48px;border-left:1px solid #d9ebf3;}.menuson li .sub-menus li.active{position:relative;right:-1px;border-left:none;background:#fff;}.menuson li .sub-menus li a{padding-left:9px;color:#000000; background:url(../images/sub-menu-icon.png) 0 12px no-repeat;}.menuson li .sub-menus li a:hover{color:#238ac5;}.menuson li .sub-menus li.active a{color:#238ac5;}.menuson li.active.open cite{margin-top:12px;margin-left:37px; background:url(../images/jtx.png) no-repeat;}

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。