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>
















  • 相关阅读:
    css中优先级与层叠
    微服务通过feign.RequestInterceptor传递参数
    maven详解
    Java8新特性interface中的static方法和default方法
    设计模式六大原则---转
    MySQL主从复制作用和原理
    Mysql Binlog三种格式详细介绍
    分布式主键生成逻辑总结--转
    java幂等性的解决方案
    spring事务的传播机制新解
  • 原文地址:https://www.cnblogs.com/Oraice/p/5000440.html
Copyright © 2011-2022 走看看