• 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)的,再进行隐藏。

  • 相关阅读:
    hdu 4707 Pet
    hdu 3584 Cube (三维树状数组)
    poj 2155 Matrix (树状数组)
    poj 1195 Mobile phones (树状数组)
    工厂方法模式
    简单工厂模式
    关于设计模式
    UML类图
    UML
    【转载】UML用例图
  • 原文地址:https://www.cnblogs.com/ithuo/p/4792500.html
Copyright © 2020-2023  润新知