zoukankan      html  css  js  c++  java
  • JS_左边栏菜单

    需求:

      要求实现左边栏菜单点击一下就弹开,其他的隐藏.再点击一下就隐藏.

      最多只能有一个菜单的详细内容会显示出来.

      三个菜单实现联动效果.

    代码如下:

     1 <!DOCTYPE html>
     2 <html lang="zh-CN">
     3 <head>
     4     <meta http-equiv="content-Type" charset="UTF-8">
     5     <meta http-equiv="x-ua-compatible" content="IE=edge">
     6     <title>左边栏菜单</title>
     7     <style>
     8         .menu {
     9             width: 100px;
    10             border: 1px solid darkgrey;
    11         }
    12         .item-title {
    13             height: 30px;
    14             line-height: 30px;
    15             background-color: #449900;
    16             color: white;
    17             text-align: center;
    18             border-bottom: 1px dotted darkgrey;
    19         }
    20         .hide {
    21             display: none;
    22         }
    23     </style>
    24 </head>
    25 <body>
    26 
    27 <div class="menu">
    28     <div class="item">
    29         <div class="item-title">菜单一</div>
    30         <div class="item-body hide">
    31             <div>内容1</div>
    32             <div>内容2</div>
    33             <div>内容3</div>
    34         </div>
    35     </div>
    36     <div class="item">
    37         <div class="item-title">菜单二</div>
    38         <div class="item-body hide">
    39             <div>内容1</div>
    40             <div>内容2</div>
    41             <div>内容3</div>
    42         </div>
    43     </div>
    44     <div class="item">
    45         <div class="item-title">菜单三</div>
    46         <div class="item-body hide">
    47             <div>内容1</div>
    48             <div>内容2</div>
    49             <div>内容3</div>
    50         </div>
    51     </div>
    52 </div>
    53 <script src="jquery-3.3.1.min.js"></script>
    54 
    55 
    56 <script>
    57     var $titleEles = $(".item-title");
    58     for (var i=0;i<$titleEles.length;i++){
    59         $titleEles[i].onclick=function () {
    60             console.log(this);            $(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide");
    61         }
    62     }
    63 
    64 </script>
    65 </body>
    66 </html>

  • 相关阅读:
    如何实现文字两端对齐?
    三目运算符的复杂运算(条件嵌套判断)
    微信小程序实现图片上传,预览,删除
    微信小程序滚动条返回顶部
    vue+axios下载文件的实现
    java script 运算符
    关于placeholder提示内容出现在textarea底部问题
    js基础知识
    java script 字符串
    java script 函数
  • 原文地址:https://www.cnblogs.com/ZN-225/p/9622360.html
Copyright © 2011-2022 走看看