zoukankan      html  css  js  c++  java
  • jQuery水平下拉菜单实现

    <!DOCTYPE html>
    <html>
       <head>
          <title>jQuery水平下拉菜单实现</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script src="bootstrap/js/jquery-1.11.1.min.js"></script>
          <!--[if lt IE 9]>
             <script src="bootstrap/js/html5shiv.js"></script>
             <script src="bootstrap/js/respond.min.js"></script>
          <![endif]-->
          <style type="text/css">
    .menus{border:1px solid red; float:left; margin-left:4px; background:red;}
    .menus a{display:block; 100px; text-align:center;}
    .menu{display:none;}
    a{cursor:pointer;text-decoration:none;}
    a:hover{background:white; text-decoration:none;}
    a:visited{text-decoration:none; color:black;}
     </style>
          <script>
          $(function(){
    $(".menu-title").click(function(){
    $(this).next().toggleClass();
    });
            });
          </script>
       </head>
       <body> 
          <div class="menus">
          <a class="menu-title">菜单项</a>
          <div class="menu">
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          </div>
          </div> 
          <div class="menus">
          <a class="menu-title">菜单项</a>
          <div class="menu">
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          </div>
          </div> 
          <div class="menus">
          <a class="menu-title">菜单项</a>
          <div class="menu">
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          </div>
          </div> 
          <div class="menus">
          <a class="menu-title">菜单项</a>
          <div class="menu">
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          </div>
          </div>
       </body>
    </html>
















  • 相关阅读:
    0314:翻车总结
    机器人系统仿真(十一)——URDF集成Gazebo
    机器人系统仿真(十)——arbotix控制机器人运动
    机器人系统仿真(九)——xacro+摄像头+雷达传感器
    机器人系统仿真(八)——xacro小车底盘模型案例
    机器人系统仿真(七)——xacro语法详解
    机器人系统仿真(六)——xacro基本语法
    机器人系统仿真(五)——URDF工具
    机器人系统仿真(四)——四轮圆柱状机器人模型
    C++去除字符串空格和tab
  • 原文地址:https://www.cnblogs.com/Oraice/p/5000440.html
Copyright © 2011-2022 走看看