<!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. centos 安装ss

    yum install python-setuptools && easy_install pip pip install shadowsocks vi /etc/shadowsock ...

  2. Ubuntu 下Anaconda3出现 conda：command not found（未找到命令）

    问题:anaconda: command not found解决方案:打开Terminal 1.使用命令:sudo apt install vim 安装vim文本编辑器2.使用命令:vim ~/.ba ...

  3. vue项目使用vue-photo-preview插件实现点击图片放大预览和移动

    官方链接: http://npm.taobao.org/package/vue-photo-preview # 安装 npm install vue-photo-preview --save # 引入 ...

  4. 洛谷P2329 栅栏 [SCOI2005] 搜索

    正解:搜索 解题报告: 先放下传送门! 首先说下爆搜趴,就直接枚每个需求是否被满足以及如果满足切哪个板子,随便加个最优性剪枝,似乎是有80pts 然后思考优化 首先显然尽量满足需求比较小的,显然如果能 ...

  5. 学习UDP

    参考博客:https://www.cnblogs.com/skyfsm/p/6287787.html 简单编写了 udp的小程序,udp_client 端通过终端输入字符,然后发送给udp_serve ...

  6. awk数组

    对于awk '!a[$3]++',需要了解3个知识点 1.awk数组知识,不说了2.awk的基本命令格式 awk 'pattern{action}' 省略action时,默认action是{print ...

  7. es组合多个条件进行查询

    GET /test_index/_search{ "query": { "bool": { "must": { "match&qu ...

  8. sql server误删数据恢复delete（低效版）

    关键词:sql server误删数据恢复,mssql误删数据恢复,delete --切换数据库 use master --构建函数 Create PROCEDURE Recover_Deleted_D ...

  9. ros 运行rviz时出现 QXcbConnection: XCB error: 148 错误 解决方法

    出现上述问题的原因: 1.由于使用了nvc远程控制下位机: 2.rviz是一个基于opengl开发的图形插件,需要使用理论的屏幕参数(thetis' screen),由于使用了teamviewer会导 ...

  10. 20190122 loop

    declare a number; v_begin date := to_date('201901013','yyyymmdd'); v_end date := to_date('20190119', ...