<!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. 自动化运维工具-mussh工具安装配置及简单使用讲解

    1.先决条件: 安装pssh工具的主机针对远程主机需要配置免秘钥认证: ssh-keygen -t rsa ssh-copy-id [remotehost] 2.下载mussh工具安装介质: http ...

  2. MySQL命令：约束

    约束是一种限制,它通过对表的行或列的数据做出限制,来确保表的数据的完整性.唯一性 约束分类: 约束类型与关键字: 主键      PRIMARY KEY 默认值  DEFAULT 唯一      UN ...

  3. AlphaRacks 2018年黑五 VPS $3.99/年

    发现这么久了这些链接还是能购买.算是捡了便宜了. 搭建shadowsocks非常合算. 我买了6.99美元的那个. VPS OVZ构架 1核/125MB/5GB/800GB流量/1 IPv4/OVZ/ ...

  4. Git 子模块：git submodule

    imtianx 2018年03月08日阅读 2057 Git 子模块:git submodule 工作中,可能会遇到在一个Git仓库 中添加 其他 Git 仓库的场景.比如,在项目中引用第三方库.或者 ...

  5. ms sql server，oracle数据库实现拼接一列的多行内容

    项目中要将查询出的一列的多行内容拼接成一行,如下图:ypmc列. ms sql server: 网上查到相关资料如下:http://blog.csdn.net/rolamao/article/deta ...

  6. ab压力测试工具的使用

    一.下载稳定版2.2.31 http://httpd.apache.org/ 二.2.2.*和2.4.*区别? httpd-2.2.x(prefork)    httpd-2.4.x(event) 编 ...

  7. swift 桥接 Bridging 的创建和使用

    swift编程时,大概率会用到OC的文件,这时就要使用swift与oc的桥接文件.桥接文件以  XXXX-Bridging-header.h  这样子的文件名形式为标准,XXXX是你的项目名字. 具体 ...

  8. winform接收全局的快捷键

    public class NativeWIN32 { public NativeWIN32() { } /* ------- using WIN32 Windows API in a C# appli ...

  9. 关于XML文档的xmlns、xmlns:xsi和xsi:schemaLocation

    https://yq.aliyun.com/articles/40353 ************************************* 摘要: 相信很多人和我一样,在编写Spring或者 ...

  10. s3存储桶：s3可扩展的云存储

    S3(Simple Storage Service,简单存储服务),即可扩展的云存储,又称桶存储,S3 是一种面向 Internet 的存储服务.S3为任意类型的文件提供临时或永久的存储服务.用于存储 ...