zoukankan      html  css  js  c++  java
  • 采用jQuery连缀写法的折叠菜单

    代码简介:

    jQuery 连缀写法折叠菜单代码,作者是位高手啊,自己用jQuery的连缀写法编写的,差不多是手风琴菜单,功能是实现了,不过有点担心效率,作者希望与高人一起交流进步。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>采用jQuery连缀写法的折叠菜单_网页代码站(www.webdm.cn)</title>
    <style>
    /** 清除内外边距 **/
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
    dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
    pre, /* text formatting elements 文本格式元素 */
    form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
    th, td /* table elements 表格元素 */ {
        margin: 0;
        padding: 0;
    }
    
    body,button, input, select, textarea {
        font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 { font-size: 100%; }
    address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
    code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
    small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
    
    ul, ol { list-style: none; }
    
    /** 重置文本格式元素 **/
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
    
    sup { vertical-align: text-top; } /* 重置,减少对行高的影响 */
    sub { vertical-align: text-bottom; }
    
    /** 重置表单元素 **/
    legend { color: #000; } /* for ie6 */
    fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
    button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
    /* 注:optgroup 无法扶正 */
    
    /** 重置表格元素 **/
    table { border-collapse: collapse; border-spacing: 0; }
    </style>
    <style type="text/css">
    #menu{300px;overflow:hidden}
    #menu dt{background:#ccc;color:#fff;cursor:pointer}
    #menu dd{background:#f4f4f4;color:#fff;;display:none}
    #menu dt.hover{background:green}
    </style>
    <script type="text/javascript" src="http://www.webdm.cn/themes/script/jquery.js" ></script>
    <script type="text/javascript">
    $(function(){
    	$("dl").click(function(){
    		$(this).children('dt').addClass('hover').end().children("dd").show();
    		$(this).siblings().children('dt').removeClass("hover").end().end().siblings().children("dd").hide();
    	});
    });
    </script>
    </head>
    <body>
    <div id="menu">
    	<dl>
    		<dt>第1章-认识jQuery</dt>
    		<dd><a href="#">1.1-JavaScript和JavaScript库</a></dd>
    		<dd><a href="#">1.2-加入jQuery</a></dd>
    		<dd><a href="#">1.3-编写简单jQuery代码</a></dd>
    		<dd><a href="#">1.4-jQuery对象和DOM对象</a></dd>
    	</dl>
    	<dl>
    		<dt>第2章-jQuery选择器</dt>
    		<dd><a href="#">2.1-jQuery选择器是什么</a></dd>
    		<dd><a href="#">2.2-jQuery选择器的优势</a></dd>
    		<dd><a href="#">2.3-jQuery选择器</a></dd>
    		<dd><a href="#">2.4-应用jQuery改写示例</a></dd>
    	</dl>
    	<dl>
    		<dt>第3章-jQuery中的DOM操作</dt>
    		<dd><a href="#">3.1-DOM操作的分类</a></dd>
    		<dd><a href="#">3.2-jQuery中的DOM操作</a></dd>
    	</dl>
    </div>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
    </body>
    </html>
    代码来自:http://www.webdm.cn/webcode/8a2f14bc-e887-4aa5-8f76-f38ee3d9a835.html
    
  • 相关阅读:
    gym102215题解
    Codeforces6E_Exposition
    Codeforces893F_Subtree Minimum Query
    是男人就过八题A_A String Game
    gym101666题解
    gym102201E_Eat Economically
    gym102346题解
    C++输入函数用法
    迷宫问题(BFS+保存路径) POJ No.3984
    【BFS】迷宫的最短路径问题
  • 原文地址:https://www.cnblogs.com/webdm/p/2112595.html
Copyright © 2011-2022 走看看