<!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. utf-8 utf8

    mysql> DROP TABLE IF EXISTS student; Query OK, 0 rows affected (0.00 sec) mysql> create table ...

  2. day0321正则表达式

    一.正则表达式 1.定义一个规则,检测某一段字符串是否符合规则,将符合规则的字符匹配出来. 2.只和字符串相关 3.字符组 描述一个字符位置的内容 3.1    [012345]检测0,1,2,3,4 ...

  3. [GRE] GRE协议介绍

    写的一般,主要看下图就行了. https://blog.csdn.net/Mary19920410/article/details/72303641 前半部分介绍还不错,后半部分没看. http:// ...

  4. [nginx] load balancing & location

    一 将NGINX配置成7层load balancer,该怎么做? 参见: http://nginx.org/en/docs/http/load_balancing.html https://docs. ...

  5. [daily][archlinux][btrfs][mysql] 在btrfs上使用mariadb

    在btrfs上使用mariadb的时候,需要注意关闭btrfs的Copy on Write (/var/lib/mysql目录) 如下: ┬─[tong@T7:~/Data/anthropoid]─[ ...

  6. 《HTTP - https》

    一:HTTP 缺点? - 明文通讯(也是最受诟病的一个缺点) - 不验证对方的身份(你说你是你?你怎么证明你是你呢?) - 无法验证报文的完整性,可能已经被篡改(在挨打的边缘,来回试探) 二:HTTP ...

  7. push问题1

    问题: $ git pushTo gitee.com:kekemuyu/xtpole.git ! [rejected] master -> master (fetch first)error: ...

  8. yaml语言在线可视化翻译

    yaml语言在线可视化翻译 https://editor.swagger.io/

  9. shell编程awk基础介绍

    awk介绍 报告生成器,格式化文本输出 处理机制类似sed命令,自带循环处理    读入一行处理一行然后自动读取下一行再进行处理 sed命令换行的标识是固定的,只能是回车换行.    awk里面的换行 ...

  10. 数据库---初识sql语句

    初识sql语句 SQL语言主要用于存取数据.查询数据.更新数据和管理关系数据库系统,SQL语言由IBM开发.SQL语言分为3种类型: DDL语句     数据库定义语言: 数据库.表.视图.索引.存储 ...