<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

     </style>

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

 </head>

 <body>

     <div class="box">

         <ul>

             <li class="level">

                 <a href="#none">襯衫</a>

                 <ul>

                     <li><a href="#none">短袖</a></li>

                     <li><a href="#none">長袖</a></li>

                     <li><a href="#none">T袖</a></li>

                     <li><a href="#none">短T</a></li>

                 </ul>

             </li>

             <li class="level">

                 <a href="#none">衛衣</a>

                 <ul>

                     <li><a href="#none">短衛</a></li>

                     <li><a href="#none">長衛</a></li>

                     <li><a href="#none">套衛</a></li>

                     <li><a href="#none">童衛</a></li>

                 </ul>

             </li>

             <li class="level">

                 <a href="#none">褲子</a>

                 <ul>

                     <li><a href="#none">短褲</a></li>

                     <li><a href="#none">長褲</a></li>

                     <li><a href="#none">七分</a></li>

                     <li><a href="#none">全長</a></li>

                 </ul>

             </li>

         </ul>

     </div>

     <script>

         $(function(){

             /*獲取class為level的下一個子集a元素，綁定點擊事件*/

             $(".level>a").click(function(){

                 /*為當前元素添加一個類元素current，下一個元素顯示，父元素截取*/

                  /*當前元素.addClass添加類元素，next()下一個元素，所有蘇元素.siblings添加.children子元素a，removeclass移除current.下一個元素隱藏*/

                 $(this).addClass("current").next().show().parents().siblings().children("a").removeClass("current").next().hide();

                 return false;

             })

         })

     </script>

 </body>

 </html>

jQuery显示隐藏的更多相关文章

  1. jquery显示隐藏toggle

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

  2. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

  3. jquery显示隐藏效果

    通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素toggle() 方法来切换 hide() 和 show() 方法. 1.hide()隐藏元素 $(se ...

  4. js jQuery显示隐藏div的几种方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_36135335/article/d ...

  5. jquery显示隐藏密码跟显示密码

    今天讲述的是html5中input的password密码的加密与显示 都知道input标签加上password输入密码显示的都是原点.......怎么点一个按钮让他显示回来明文数字1234567 上代 ...

  6. [jquery]显示隐藏div标签的几种方法

    1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...

  7. jQuery显示隐藏div的几种方法

    1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...

  8. jQuery显示隐藏动态效果的几种写法

    <script type="text/javascript"> $(document).ready(function() {     /*$("#test1& ...

  9. jquery 显示 隐藏

    参考 http://www.w3school.com.cn/jquery/jquery_hide_show.asp $("#a").hide(); $("#a" ...

随机推荐

  1. cors 详解

    http://www.ruanyifeng.com/blog/2016/04/cors.html

  2. wfp（Application的运用）

    1.Application中封装了wpf的一些常用的功能,如检查未经处理的异常,处理命令行参数等. 2.如何启动wpf程序: app.xaml可用于启动wpf的窗体.也可以不用这用方式.直接创建一个a ...

  3. [development][security][suricata] suricata 使用与调研

    0: OISF:https://oisf.net/ 1: suricata是什么 https://suricata-ids.org/ 2:安装 https://redmine.openinfosecf ...

  4. 天使玩偶:CDQ分治

    这道好(du)题(liu)还是很不错的 挺锻炼代码能力和不断优化 卡常的能力的. 对于 每次询问 我都可以将其分出方向 然后 写 也就是针对于4个方向 左下 左上 右下 右上 这样的话 就成功转换了问 ...

  5. Qt获取QObject对应的类名并把它转为真实类型（使用obj->metaObject()->className() ）

    QObject是有窗口类的父类,比如QWidget,QLabel,QPushButton等都直接或间接继承自QObject类.如果把某个窗口中的所有控件都装到一个QList<QObject*&g ...

  6. linux strncpy()和strcat使用总结

    strcat原型:char *strcat(char *dest,const char *src); 把src所指字符串添加到dest结尾处(覆盖dest结尾处的'\0')并添加'\0'.src和de ...

  7. Java体系基本概念

    JVM:Java虚拟机 JRE:(Java Runtime Environment)Java程序允许,测试,传输应用程序的环境和平台 包括 jvm ,java 核心类库和支持的文件,但不包含开发工具J ...

  8. bug:使用UIImageView+AFNetworking 图片不能正常显示的原因

    今天调的东西涉及到图片加载,我刚看了下项目里以前导入了SDWebImage库,又发现整个就一个地方使用到了SDWebImage异步加载图片的方法,感觉占体积又鸡肋,干脆去掉,用UIImageView+ ...

  9. document的全量替换、强制创建、删除

    1.document的全量替换(1)语法与创建文档是一样的,PUT /test_index/test_type/id ,如果document id不存在,那么就是创建:如果document id已经存 ...

  10. WebSocket 的鉴权授权方案

    引子 WebSocket 是个好东西,为我们提供了便捷且实时的通讯能力.然而,对于 WebSocket 客户端的鉴权,协议的 RFC 是这么说的: This protocol doesn’t pres ...