zoukankan      html  css  js  c++  java
  • Jquery点击事件隐藏显示菜单

    显示的效果就是这样,点击菜单,显示自己菜单下的内容,其他菜单下的都隐藏

    html代码如下

     1 <div>
     2      <ul class="menu">
     3       <li class="leav">
     4         <a href="#">衬衫</a>
     5         <ul class="leave">
     6             <li>
     7                 <a href="javascript:void(0)">短袖衬衫</a>
     8                 <a href="javascript:void(0)">长袖衬衫</a>
     9                 <a href="javascript:void(0)">无袖衬衫</a>
    10                 <a href="javascript:void(0)">黄袖衬衫</a>
    11                 <a href="javascript:void(0)">蓝袖衬衫</a>
    12                 <a href="javascript:void(0)">红袖衬衫</a>
    13             </li>
    14         </ul>
    15       </li>
    16       <li class="leav">
    17       <a href="#">裤子</a>
    18         <ul class="leave">
    19             <li>
    20                 <a href="javascript:void(0)">短袖裤子</a>
    21                 <a href="javascript:void(0)">年轻晨曦</a>
    22                 <a href="javascript:void(0)">啊睡觉的</a>
    23                 <a href="javascript:void(0)">阿什顿飞</a>
    24                 <a href="javascript:void(0)">品牌名牌</a>
    25                 <a href="javascript:void(0)">终极奢侈</a>
    26             </li>
    27         </ul>
    28         </li>
    29        <li class="leav">
    30         <a href="#">名牌</a>
    31         <ul class="leave">
    32             <li>
    33                 <a href="javascript:void(0)">内裤内衣</a>
    34                 <a href="javascript:void(0)">床单被罩</a>
    35                 <a href="javascript:void(0)">长衫西裤</a>
    36                 <a href="javascript:void(0)">阿玛尼</a>
    37                 <a href="javascript:void(0)">京东折扣</a>
    38                 <a href="javascript:void(0)">国外名牌</a>
    39             </li>
    40         </ul>
    41         </li>
    42         <li class="leav">
    43         <a href="#">玩具</a>
    44         <ul class="leave">
    45             <li>
    46                 <a href="javascript:void(0)">飞机</a>
    47                 <a href="javascript:void(0)">枪</a>
    48                 <a href="javascript:void(0)">大炮</a>
    49                 <a href="javascript:void(0)">原子弹</a>
    50                 <a href="javascript:void(0)">象棋</a>
    51                 <a href="javascript:void(0)">国外名牌</a>
    52             </li>
    53         </ul>
    54         </li>
    55         <li class="leav">
    56         <a href="#">手机</a>
    57         <ul class="leave">
    58             <li>
    59                 <a href="javascript:void(0)">联想</a>
    60                 <a href="javascript:void(0)">酷派</a>
    61                 <a href="javascript:void(0)">华为</a>
    62                 <a href="javascript:void(0)">中兴</a>
    63                 <a href="javascript:void(0)">小米</a>
    64                 <a href="javascript:void(0)">魅族</a>
    65             </li>
    66         </ul>
    67         </li>
    68         <li class="leav">
    69         <a href="#">电脑</a>
    70         <ul class="leave">
    71             <li>
    72                 <a href="javascript:void(0)">联想</a>
    73                 <a href="javascript:void(0)">宏基</a>
    74                 <a href="javascript:void(0)">苹果</a>
    75                 <a href="javascript:void(0)">华硕</a>
    76                 <a href="javascript:void(0)">戴尔</a>
    77                 <a href="javascript:void(0)">国外名牌</a>
    78             </li>
    79         </ul>
    80         </li>
    81        </ul>
    82     </div>

    只需要一行jquery代码就能完成那个操作

     $(this).next().show().parent().siblings().children("a").next().hide() 

    点击事件由上层a标签触发$(".leav > a")

    a标签下的元素都显现,然后返回父元素,就是.leav,再找到.leav的兄弟元素中的子元素(a)的,再进行隐藏。

  • 相关阅读:
    ASP.NET MVC中多种ActionResult用法总结
    jQuery中异步操作对象Deferred
    jQuery中bind方法和live方法区别解析
    深入理解Javascript中this, prototype, constructor
    SQL及常见的三种类型注释
    SQLServer的两个日期相减(间隔)datediff函数
    SQLServer查询进程与死锁语句
    SqlServer获取当前日期的详细写法
    SQL中 Decode 和 Sign 语法的简单用法
    数据仓库模型之CDM、LDM与PDM的区别
  • 原文地址:https://www.cnblogs.com/ithuo/p/4792500.html
Copyright © 2011-2022 走看看