废话不多说,直接上代码: 有注释

  1.  <head>
  2.      <title></title>
  3.      <style type="text/css">
  4.          div
  5.          {
  6.              border: 1px solid black;
  7.              width: 100px;
  8.          }
  9.          ul .tit, .content
  10.          {
  11.              list-style-type: none;
  12.          }
  13.          .menu
  14.          {
  15.              padding: 0px;
  16.              margin: 0px;
  17.          }
  18.          .tit
  19.          {
  20.              background-color:#0094ff;
  21.              color:White;
  22.              padding:2px 10px;
  23.              cursor:pointer;
  24.          }
  25.      </style>
  26.      <script src="js/jquery-1.9.0.js" type="text/javascript"></script>
  27.      <script type="text/javascript">
  28.          $(function () {
  29.              //一开始直接隐藏菜单
  30.              $(".content").hide();
  31.              //给标题添加点击事件
  32.              $(".tit").click(function () {
  33.                  //当点击的时候,打开菜单,同时其他的菜单隐藏
  34.                  $(this).next().slideDown().parent().siblings().children(".content").slideUp();
  35.              }).first().next().slideDown();//默认之后第一个菜单打开
  36.          });
  37.      </script>
  38.  </head>
  39.  <body>
  40.      <div>
  41.          <ul class="menu">
  42.              <li class="tit">菜单1</li>
  43.              <li class="content">
  44.                  <ul>
  45.                      <li>11111</li>
  46.                      <li>11111</li>
  47.                      <li>11111</li>
  48.                      <li>11111</li>
  49.                  </ul>
  50.              </li>
  51.          </ul>
  52.          <ul class="menu">
  53.              <li class="tit">菜单2</li>
  54.              <li class="content">
  55.                  <ul>
  56.                      <li>22222</li>
  57.                      <li>22222</li>
  58.                      <li>22222</li>
  59.                      <li>22222</li>
  60.                  </ul>
  61.              </li>
  62.          </ul>
  63.          <ul class="menu">
  64.              <li class="tit">菜单3</li>
  65.              <li class="content">
  66.                  <ul>
  67.                      <li>22222</li>
  68.                      <li>22222</li>
  69.                      <li>22222</li>
  70.                      <li>22222</li>
  71.                  </ul>
  72.              </li>
  73.          </ul>
  74.      </div>
  75.  </body>

js实现收缩菜单代码

js实现收缩菜单效果的更多相关文章

  1. JS实战 ·  收缩菜单表单布局

     获取节点的两种方式:     1.通过event对象的srcElement属性:     2.通过事件源对象用this传入.     代码如下: <html> <head> ...

  2. js实现环形菜单效果

    点击中间的圆点,会弹出环形菜单,效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  3. js之展开收缩菜单，用到window.onload ,onclick,

    目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果 一.准备阶段 html文件 <!DOCTYPE html&g ...

  4. 原生JS通过勾股定理计算苹果菜单效果

    JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...

  5. 原生JS实现苹果菜单

    今天分享下用原生JS实现苹果菜单效果,这个效果的重点有以下几点 图标中心点到鼠标的距离的算法 利用比例计算图标的宽度 代码地址:https://github.com/peng666/blogs/blo ...

  6. 用js枚举实现简易菜单效果

    用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...

  7. Js实现京东无延迟菜单效果(demo)

    一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...

  8. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  9. js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

随机推荐

  1. Delphi XE5 android 蓝牙通讯传输

    不多讲,直接上代码了. 代码来自网络 http://files.cnblogs.com/nywh2008/Bluetooth_LEDs_android.rar

  2. 动态内存 this指针

    #include <iostream> #include <string> class Company { public: Company(std::string theNam ...

  3. 【转链接】Handlebars模板引擎以及浅谈模板引擎的实现原理

    什么叫做“模板引擎“?我是这么理解的:就是对一些待填入数据的占位符的解析.如果你使用过Python的django框架,那你肯定是模板一点也不陌生.模板引擎就是解析模板的,把后端数据塞到前端页面模板. ...

  4. What are the advantages of logistic regression over decision trees?FAQ

    What are the advantages of logistic regression over decision trees?FAQ The answer to "Should I ...

  5. java去掉List中的重复值代码

    1. list中为字符串的情况,代码如下: public static void main(String[] args) { List<String> li = new ArrayList ...

  6. ValueError: Attempted relative import in non-package

    执行:python deom/scripts/populate.py ValueError: Attempted relative import in non-package solve:python ...

  7. uEditor独立图片上传

    项目中.上传图片,非常希望有一款比较兼容的查件. 网上找了一些,图片上传立刻显示的js代码,还有uploadify.都会碰到这样那样的不兼容和其它头疼的问题. 后来想,干脆就用php的上传类最干脆.但 ...

  8. CURL 多线程问题

    http://blog.csdn.net/wslz2001/article/details/12117127 默认情况下libcurl完成一个任务以后,出于重用连接的考虑不会马上关闭 如果没有新的TC ...

  9. linux配置防火墙详细步骤(iptables命令使用方法)

    通过本教程操作,请确认您能使用linux本机.如果您使用的是ssh远程,而又不能直接操作本机,那么建议您慎重,慎重,再慎重! 通过iptables我们可以为我们的Linux服务器配置有动态的防火墙,能 ...

  10. Android：activity跳转过渡效果

    放在startActivity(intent);后面 overridePendingTransition(android.R.anim.fade_in,android.R.anim.fade_out) ...