jQuery水平下拉菜单实现

时间：2021-08-09 17:41:31
<!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; width: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>

jQuery水平下拉菜单实现的更多相关文章

  1. jquery 实现下拉菜单

    Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js  版本不限 : 接下来把=================== ...

  2. 第72天：jQuery实现下拉菜单

    jQuery实现下拉菜单 一.居中 1.块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度 2.行内块元素居中:给元素父级设置text-algin:center; < ...

  3. jquery带下拉菜单和焦点图

    jQuery,下拉菜单,二级菜单,索引按钮,焦点图代码,jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码. JQuery特效代码来源:http://www.huiy ...

  4. jQuery美化下拉菜单插件dropkick

    dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...

  5. JQuery纵向下拉菜单实现心得

    jquery库给我们带来了许多便利,不愧是轻量级的DOM框架,在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍,期待各位小伙伴的指导.使用jquery实 ...

  6. jQuery EasyUI 下拉菜单获取日期，最高年份为当前年份，最低年份为当前年份向前推10年

    http://blog.csdn.net/wangjingjing1014/article/details/16885341 <head><meta http-equiv=&quot ...

  7. 实例：用jQuery实现垂直和水平下拉 菜单

    主要是利用jQuery来实现垂直菜单和水平菜单.实现效果如图: 第一步,创建一个HTML文件,如图,包含两个ul.当然把jquery库也引入进去了. <!DOCTYPE html> &lt ...

  8. jquery设置下拉菜单

    jQuery代码 1,引用jQuery库 2,show方法 3,hide方法 <script type="text/javascript"> $function(){ ...

  9. jquery多级下拉菜单

    var menu = new Click('#menu',{target:'p',parent:'li',contr:'ul',way:0}); /* 参数说明: target : 点击事件发生在该元 ...

随机推荐

  1. &period;NET Core采用的全新配置系统&lbrack;2&rsqb;&colon; 配置模型设计详解

    在<.NET Core采用的全新配置系统[1]: 读取配置数据>中,我们通过实例的方式演示了几种典型的配置读取方式,其主要目的在于使读者朋友们从编程的角度对.NET Core的这个全新的配 ...

  2. &period;net MVC借助Iframe实现无刷新上传文件

    html: <div id="uploadwindow" style="display: none;"> <form action=&quot ...

  3. HDU 4004 The Frog&&num;39&semi;s Games&lpar;二分&rpar;

    题目链接 题意理解的有些问题. #include <iostream> #include<cstdio> #include<cstring> #include&lt ...

  4. GAC&lpar;Global Assembly Cache&rpar;注册&sol;卸载 dll

    当发现有多个解决方案引用一个dll时,为了不重复引用所以将.net的一个dll注册到GAC中去. gacutil.exe. 记得使用管理员权限打开 开始菜单-Microsoft Visual Stud ...

  5. 用python快速搭建WEB服务器

    cmd下进入你要搞WEB项目的目录 输入↓方代码 python -m SimpleHTTPServer 端口号# 默认是8000 这样就启动了一个简单的WEB服务器

  6. 用tomcat6自定义域名

    第一步:tomcat配置 修改server.xml文件 8080端口 更改为 80端口 并在<Host name="localhost"  appBase="web ...

  7. Maven项目pom&period;xml文件报xxx&bsol;target&bsol;classes&bsol;META-INF&bsol;MANIFEST&period;MF &lpar;系统找不到指定的路径&rpar;

    在今天的学习Maven项目中遇到的这个错误:pom.xml文件报xxx\target\classes\META-INF\MANIFEST.MF (系统找不到指定的路径) 在Maven项目学习中,缓存问 ...

  8. nodeJS 调试debug

    一. 用chrome来调试 1)运行node的时候,带上 --inspect-brk=9999 node --inspect-brk= index.js 2)打开chrome调试管理页面 3)如果没有 ...

  9. matlab处理手写识别问题

    初学神经网络算法--梯度下降.反向传播.优化(交叉熵代价函数.L2规范化) 柔性最大值(softmax)还未领会其要义,之后再说 有点懒,暂时不想把算法重新总结,先贴一个之前做过的反向传播的总结ppt ...

  10. js html 页面倒计时 精确到秒

    <!doctype html> <html> <head> <meta charset="utf-8"> </head> ...

相关文章