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>
















  • 相关阅读:
    docker/qemu中是如何对设备管理的
    capacilitys docker中的权限设置 privileged
    比特币的价值
    js连接sqlserver进行查询
    easyUI 添加排序到datagrid
    jquery easyui datagrid 分页 详解
    ASP.net中DateTime获取当前系统时间的大全
    计算数据库中30天以内,30-60天,60-90天,90天以外的数据的个数(用sql实现)
    常用的.net开源项目
    数据库设计三大范式
  • 原文地址:https://www.cnblogs.com/Oraice/p/5000440.html
Copyright © 2011-2022 走看看