<!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. 远程登录oracle 12.2数据库报错ORA-28040解决办法

    今天新安装的oracle 12.2.0.1数据库,通过本地sqlplus远程登录12c数据库报错ora-28040,如下: ORA-28040: No matching authentication ...

  2. 为QtCreator项目模板添加自动中文支持

    每用QtCreator创建一个Qt项目时都要为它添加中文支持,比如qt4: 就要在main.cpp里添加 QTextCodec* codec = QTextCodec::codecForName(&q ...

  3. javascript高级技巧篇（作用域安全、防篡改、惰性载入、节流、自定义事件，拖放）

    安全的类型检测 在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式字符串.每个类在内部都有一个[[Class]]属性 ...

  4. 【python基础】sys

    sys模块 参考: https://blog.csdn.net/qq_38526635/article/details/81739321 http://www.cnblogs.com/cherishr ...

  5. Jenkins tomcat打包启动脚本，待完善

    shell脚本 #!/bin/bashJENKINS_HOME=/usr/local/jenkinsTOMCAT_HOME=/usr/local/jenkins/tomcat-testSHUTDOWN ...

  6. 接口测试工具-Jmeter使用笔记（一：运行一个HTTP请求）

    博主自从毕业从事软件测试行业距今一年半时间,大多数时间都在跟各种API打交道,使用过的接口测试工具也有许多,本文记录下各工具的使用心得,以及重点介绍我在工作中是如何使用Jmeter做测试的,都是在wi ...

  7. magento 2.3安装测试数据

    前面我们一步步composer安装Magento2.3,但是没有数据的话各项设置不是很熟悉,所以最好还是安装一下测试数据.下面我们就跟ytkah一起填充数据.假设magento 2.3安装目录是/ww ...

  8. C++读取dll文件所在目录

    ////保证config.txt从本DLL目录位置读取 //获取DLL自身所在路径(此处包括DLL文件名) }; GetModuleFileNameA((HINSTANCE)&__ImageB ...

  9. sap 类的左侧导航栏

  10. [LeetCode] 872. Leaf-Similar Trees_Easy tag: DFS

    Consider all the leaves of a binary tree.  From left to right order, the values of those leaves form ...