<!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. C 缓冲区过读 if (index >= 0 && index < len)

    C 缓冲区过读 if (index >= 0 && index < len) CWE - CWE-126: Buffer Over-read (3.2) http://cw ...

  2. mysql缓存分析

  3. [DPI][TCP] linux API的接口如何控制urgent包的收发

    做DPI,写协议栈的时候,处理到了urgent数据包.突然好奇应用层是如何控制发出urgent包的呢?而接收端又是如何知道,接受到了urgent包的呢? man 7 tcp,中有如下一段: TCP s ...

  4. dispatch_barrier_async，加锁

    dispatch_barrier_async用于文件读写,在写的时候,不允许进行读操作,在写操作完成才能进行读取操作,为了保证线程安全 加锁的方式: 1. barrier 2. NSLock 3. @ ...

  5. java web如何获取客户端的请求ip

    String ipAddress = request.getHeader("X-FORWARDED-FOR");if (ipAddress == null) { ipAddress ...

  6. 洛谷P3224 永无乡 [HNOI2012] 线段树/splay/treap

    正解:线段树合并 解题报告: 传送门! 这题也是有很多解法,eg:splay,treap,... 然而我都不会我会学的QAQ! 反正今天就只讲下线段树合并怎么做QAQ 首先看到这样子的说第k重要的是什 ...

  7. Python操作rabbitmq消息队列持久化

    消息队列持久化 Python操作rabbit消息队列的持久化,如下: # 创建一个名为balance的队列,对queue进行durable持久化设为True(持久化第一步)channel.queue_ ...

  8. laravel项目ThinkSNS+安装

    ThinkSNS+ 是一个使用 Laravel 开发,并且功能繁多且健壮的社交程序.今天我们来跟着ytkah一起来尝鲜一下.首先PHP 版本必须大于 7.1.3,已经下载并安装过 Composer,拥 ...

  9. Python3学习之路~8.3 socket 服务端与客户端

    通过8.2的实例1-6,我们可以总结出来,socket的服务端和客户端的一般建立步骤: 服务端 步骤:1创建实例,2绑定,3监听,4阻塞,5发送&接收数据,6关闭. #Author:Zheng ...

  10. wechat-注意事项