<!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. Exception 02 : java.lang.ClassNotFoundException: Could not load requested class : com.mysql.jdbc.Driver

    异常名称 java.lang.ClassNotFoundException: Could not load requested class : com.mysql.jdbc.Driver 异常详细信息 ...

  2. Converting Python Virtual Machine Code to C

    Converting Python Virtual Machine Code to C

  3. instrument之Time Profiler总结

    一.工欲善其事必先利其器 time profile时间分析工具用来检测应用CPU的使用情况,可以看到应用程序中各个方法正在消耗CPU时间,使用大量CPU不一定是个问题.客户端中动画就对CPU依赖就非常 ...

  4. [qemu][kvm] 在一个vmware虚拟机里安装qemu-kvm虚拟机

    说起来这个需求,简直是傻傻的.但却实实在在的摆在我的面前.... VM无外乎就是为了模拟场景:我现在要的场景就是一台很多个core的linux主机.但是我只有一个装了windows的笔记本.上边有一个 ...

  5. [daily][archlinux][game] 几个linux下还不错的游戏

    春节在家放松, 装了几个游戏在archlinux上,玩起来还不错. 假期结束开工了, 玩的时间也会比较少,准备删掉, 记录如下: 1. 0ad 即时战略类, 类似于冷兵器时代的红警. 画面还不错, 可 ...

  6. [grub2] grub2修改启动顺序

    https://wiki.centos.org/HowTos/Grub2#head-535f476a61e62f24bc150c73f7e0816f85345f46 1, 查看所有的entry [ro ...

  7. [archlinux][plasma][screensaver] plasma5配置屏保程序，没成功(-_-#)

    plamsa用了好久,一直没有屏保.我想要玄酷的屏保! 用xscreensaver, 之前用FVWM2的时候,就用过了,很玄酷. 一,安装 pacman -S xscreensaver 二,配置 xs ...

  8. DBCHART

    dbchart1.Series[0].DataSource := adoquery1; dbchart1.Series[0].XLabelsSource := 'aaaa'; dbchart1.Ser ...

  9. Linux下Redis的安装与启动

    一. 进入目录(我们准备将redis装入opt文件夹) $ cd /opt/ 二.下载redis压缩包 $ wget http://download.redis.io/releases/redis-4 ...

  10. webmin改https访问

    直接用yum安装: yum -y install openssl perl perl-Net-SSLeay perl-IO-Tty perl-Crypt-SSLeay 测试perl模块是是否安装成功, ...