<!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. CSS：元素类型

    元素分类 在CSS中,html中的标签元素大体分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 块状元素 <div>.<p>.<h1>...& ...

  2. 优化网站设计（二）：使用CDN

    前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...

  3. arcgisengine实现矩形转面

    面文件都有几何类型. arcengine在绘图时,不规则的多边形的几何类型是esriGeometryPolygon,矩形的几何类型是esriGeometryEnvelope,圆的几何类型是esriGe ...

  4. mongo 的简单查询语法

    小白的我对MONGO的一些语句搜集用于区别mysql及一些小常识 pymongo 语法按照id进行倒序操作db.news.find().limit(20).sort([("_id" ...

  5. ps命令参数

    1.查看父进程ps -ef |grep <进程名>在显示的输出中,第三列就是该进程的父进程PID,然后可以再使用ps命令来查看父进程的名称ps -ef |grep <父进程PID&g ...

  6. gpg签名用法

    – 在CentOS 6上生成公钥/私钥对 [root@localhost ~]# gpg --gen-key gpg (GnuPG) ; Copyright (C) Free Software Fou ...

  7. 为什么mysql 5.7.24启停不显示错误信息？log-error_verbosity参数

    关键词:log-error_verbosity ,mysql启停没有信息,mysql启停不显示错误信息,mysql不显示启停信息 原因就是因为 log-error_verbosity = 2 被设置成 ...

  8. Centos安装elasticsearch教程

    elasticsearch安装是ytkah在做laravel电商站内搜索要实现的,通过自己的搜索和学习能力不算很费力解决了.下面就整理一下安装elasticsearch教程,服务器是Centos 7, ...

  9. Windows下安装centOS7双系统总结

    首先,按照网络教程,使用硬盘安装模式(失败): 一.使用分盘工具(easeUS Partion Master)分出一块未使用的空间,为安装centOS和保存镜像文件作准备. 二.将分出来的一部分空格, ...

  10. 实例：使用puppeteer headless方式抓取JS网页

    puppeteer google chrome团队出品的puppeteer 是依赖nodejs和chromium的自动化测试库,它的最大优点就是可以处理网页中的动态内容,如JavaScript,能够更 ...