<!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. shell脚本之tr命令使用

    tr命令用来进行对标准输入的内容做替换.例如 # echo 'HELLO WORLD!!!' | tr "A-Z" "a-z" hello world!!! 这 ...

  2. java设计模式--单例

    GOF23(group of four)---由4个大牛总结的JAVA23种常用的设计模式,归根结底都是为了代码的可扩展性. 设计模式中一种比较重要的思想就是:开闭原则,尽量做到对扩展开放,对修改关闭 ...

  3. nginx rate limit

    nginx rate limithttps://www.topjishu.com/12139.htmlhttps://blog.csdn.net/hellow__world/article/detai ...

  4. [development][PCRE] PCRE

    概念: PCRE (Perl Compatible Regular Expressions): 与Perl兼容的正则表达式,由C实现.但也不是完全相同,与Perl的正则表达式还是略有不同. https ...

  5. [daily][ulimit][coredump] 快速简单粗暴的用coredump调试

    http://www.cnblogs.com/hugetong/p/6898608.html 一个程序挂掉了, 怎么办?  启动coredump 写一个脚本: [root@T185 ~]# cat / ...

  6. 关于ADC采集

    对于ADC采集,想问的一些问题 1.如何初始化? 需要初始化 2.哪里可以看到是多少位采集? 3.8位ADC采集的误差是多少? 4.基准电压从哪里取?

  7. jmeter发送https请求

  8. Java问题汇总

    一.java编译通过,为什么运行却提示找不到或无法加载主类 使用运行窗口编译通过,但运行提示 通过eclipse可以运行 原因:代码中有package javaLearn:编译时在javaLearn目 ...

  9. C# 解构

    我们以前用ref或者out在一定程度上可以解决方法只有一个返回值的问题.在C#7.0中新增了一个新元组(ValueTuple),他可以让我们返回多个值.话不多说,先上代码: 我们可以看到可以用隐式推断 ...

  10. jQuery 学习笔记（2）（jQuery静态方法）

    jQuery静态方法 1.$.each() 和 $.map()  既可以遍历数组也可以遍历伪数组 $.each(arr, function(value, index) { ... } ) $.map( ...