<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <dl>

        <dt>商品管理</dt>

        <dd>商品添加</dd>

        <dd>商品列表</dd>

        <dd>商品删除</dd>

    </dl>

    <dl>

        <dt>用户管理</dt>

        <dd>用户添加</dd>

    </dl>

    <dl>

        <dt>系统设置</dt>

        <dd>清除缓存</dd>

        <dd>重新加载</dd>

    </dl>

</body>

</html>

<script src="./jquery-3.2.1.min.js"></script>

<script>

    $("dt").click(function () {

        $(this).siblings('dd').slideToggle();

    });

</script>

　　

Js-左侧折叠的更多相关文章

  1. vs2010 js代码折叠

    方法一:插件   在Visaul Studio 2010中写js或css代码,缺少像写C#代码时的那种折叠功能,当代码比较多时,就很不方便. 但是已经有VS2010扩展支持这个功能,它就是--JSEn ...

  2. Angular.js实现折叠按钮的经典指令.

    var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...

  3. JS三级折叠菜单特效 自动收缩其它级

    真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 &l ...

  4. JS左侧菜单-03

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js左侧三级菜单导航实例代码

    在左侧三级菜单导航想必大家都见到过吧,它的实现过程也并不复杂,下面有个不错的示例,感兴趣的朋友可以了解下 实例代码:   <!DOCTYPE html PUBLIC "-//W3C// ...

  6. js左侧三级菜单导航代码

    效果演示: 实例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. JS左侧菜单-02

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns=" ...

  8. JS左侧菜单-04

    <script language="javascript" type="text/javascript"> function HideShow() ...

  9. js 左侧树添加选择样式

    选择样式添加 menuToggle: function() { var menus = $('.nav-primary').children('li'); var tog = menus.has('. ...

  10. amazeui学习笔记--js插件（UI增强3）--折叠面板Collapse

    amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...

随机推荐

  1. Vue2技术整理3 - 高级篇 - 更新完毕

    3.高级篇 前言 基础篇链接:https://www.cnblogs.com/xiegongzi/p/15782921.html 组件化开发篇链接:https://www.cnblogs.com/xi ...

  2. Java程序设计（2021春）——第五章输入输出笔记与思考

    Java程序设计(2021春)--第五章输入输出笔记与思考 本章概览: 异常处理简介 程序运行时,环境.操作等可能出现各种错误.故障,我们希望程序具有容错能力,给出错误信息.面向对象的程序设计里有异常 ...

  3. 导出SQL语句

    转载请注明来源:https://www.cnblogs.com/hookjc/ if(!($db_conn=mysql_connect($db_server,$db_name,$db_pass))){ ...

  4. tcp协议下的Socket

    import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.net ...

  5. term&match得区别 text&keyword区别

    Text 概念 Text 数据类型被用来索引长文本,比如说电子邮件的主体部分或者一款产品的介绍.这些文本会被分析,在建立索引前会将这些文本进行分词,转化为词的组合,建立索引.允许 ES来检索这些词语. ...

  6. day3 -- 集合、文件操作、函数

    1.集合:集合无序,不重复,可以用set(列表) 方法将列表转换为集合,实现去重 对比列表:集合是{}包围,列表是[]包围 对比字典:集合是没有key的,字典是有key的 set_1 = {1, 2, ...

  7. log4j和lockback的比较，二者可否同时使用

    一.log4j和logback的介绍 log4j: 可以控制日志信息输送的目的地是控制台.文件.GUI组件,甚至是套接口服务器.NT的事件记录器.UNIX Syslog守护进程等:可以控制每一条日志的 ...

  8. Solution -「CF 1132G」Greedy Subsequences

    \(\mathcal{Description}\)   Link.   定义 \(\{a\}\) 最长贪心严格上升子序列(LGIS) \(\{b\}\) 为满足以下两点的最长序列: \(\{b\}\) ...

  9. 对象到底是怎么new出来的

    前言:要想理解本文,必须先了解JVM的内存结构 一.创建对象的方式 new:最常见 反射:Class.newInstance() 使用clone() 反序列化 二.创建对象的步骤(对象在JVM中怎么存 ...

  10. io流复习+代码演示

    前置知识: 序列化和反序列化 1.序列化就是在保存数据时, 保存数据的值和数据类型 2.反序列化就是在恢复数据时, 恢复数据的值和数据类型 3.需要让某个对象支持序列化机制,则必须让其类是可序列化的, ...