如何引用jQuery实现下拉列表，点击展开，点击关闭。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#apDiv1 {
position:fixed;/*fixed;left:auto;top:auto用来实现悬浮的效果*/
left: auto;
top: auto;
bottom:auto;
width: 237px;
height:auto;
z-index: 2;
margin-top:-8px;
margin-left:40px;
text-align:center;
font-size:16px;
font-family:"黑体";
color:#965D28;
background-image:url(../img/bg.png);
}
#menu{
display:none;
}
.daohang div{
height: 30px;
z-index: 2;
margin:0 auto;
text-align:center;
padding-top:5px;
overflow:hidden;
padding-top:10px;
color:965D28;
}
.daohang div:hover{
height:30px;
z-index:2;
margin:0 auto;
background-image:url(../img/menu-hover.png);
text-align:center;
overflow:visible;
color:#fff;
}
.daohang li{
margin-left:237px;
list-style-type:none;
background-color:#D3A23A;
width:160px;
line-height:30px;
color:#422B1D;
position:relative;
top:-40px;
background-image:url(../img/bg.jpg);
border:solid thin;
border-color:#965D28;
z-index:1;
}
.daohang li:hover{
margin-left:237px;
list-style-type:none;
background-color:#D3A23A;
width:160px;
line-height:50px;
color:#fff;
position:relative;
top:-40px;
border:solid thin;
border-color:#965D28;
background-image:url(../img/bg.png);
z-index:1;
}
.daohang a:link,a:visited{
text-decoration:none;
color:#965D28; }
.daohang a:hover{
text-decoration:none;
color:#fff;
} </style> </head> <body>
<script>
function menuvisible()
{
$("nav").slideToggle(1500);/*开关*/
}
</script> <div id="apDiv1" >
<img src="" width="90" />
<nav id="menu">
<div class="daohang" style=" background-color:#630">
<a href="index.html">
<div style=" background-color:#FC0; color:#fff">首页
</div>
</a>
<a href="about us.html" target="_blank"><div>关于我们
</div>
</a> <a href="services.html" target="_blank"><div>咖啡文化
</div></a>
<a href="price list.html" target="_blank"><div>价格清单
</div>
</a>
<a href="contact.html" target="_blank"><div>联系我们
</div></a>
</div>
</nav>
<div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">
<input style="color:#fff; border:none; width:100%; background-color:#630; font-family:'黑体'; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" />
</div>
<div style="background-image:url(img/bg.png)"><a href="#"style="text-decoration:none; color:#965D28;line-height:30px;">TOP
</a>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
咖啡 </body>
</html>
——————————————————————————————————————————
如何引用jQuery实现下拉列表，点击展开，点击关闭。的更多相关文章
- vue实现点击展开,点击收起
安装vue的步骤在这里就不进行赘述了,下面直接进入正题 首先定义一下data里面的数据: data () { return { toLearnList:[ 'html','css','javascri ...
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
- Content Editor Webpart（一）引用JQuery
SharePoint里面自带了一个Content Editor Webpart, 使用这个webpart.能够方便的往页面上加入随意的内容(HTML,css, JS).以此来达到往页面加入自己定义内容 ...
- listview嵌套gridview，并实现grid元素部分显示以及点击展开与折叠
原文链接:http://blog.csdn.net/duguju/article/details/49538341 有时我们需要用GridView显示目录列表,有时甚至是二级的,即listview每一 ...
- 解决sea.js引用jQuery提示$ is not a function的问题
在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...
- javascript实现列表的点击展开折叠
<script> window.onload = function() { //要折叠的区域 var catalog = document.getElementById("div ...
- 转 mvc项目中,解决引用jquery文件后智能提示失效的办法
mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法 这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...
- js 点击展开、收起
//点击展开.收起 window.onload=function(){ var current=document.getElementsByTagName('li')[0]; document.bod ...
- discuzx3.1中引用 Jquery报错的解决办法
我们可以引用jQuery给JQ赋予一个变量var jq = jQuery.noConflict(); 修改成为:<script type="text/javascript"& ...
随机推荐
- [转]LIBSVM-3.18在python环境下的使用
http://blog.csdn.net/lj695242104/article/details/39500039 1)安装Python,直接去官方网站 2)运行“cmd”,直接输入python,查看 ...
- ORACLE 分组之后容易被忽略的bug
COL_2 COL_321 3123 31 如上表数据 前台显示显示需要把COL_2的21和23转换成中文 ‘整机’ 最开始如下编写 SELECT t.col_3, CASE ...
- C++新特性（类）（转载）
C++新特性(类)里面讲的很清楚,转给大家分享一下 类机制: 类是对某一类对象的抽象:对象是某一类的实例: 类是一种复杂的数据类型,将不同类型的数据和这些数据相关的操作封装在一起的集合体: 通过一道程 ...
- POJ1201 区间
题目大意: 给定n个整数区间[ai,bi]和n个整数ci,求一个最小集合Z,满足|Z∩[ai,bi]|>=ci(Z里边在闭区间[ai,bi]的个数不小于ci). 多组数据: n(1<=n& ...
- Selenium2+python自动化23-富文本（自动发帖）
前言 富文本编辑框是做web自动化最常见的场景,有很多小伙伴遇到了不知道无从下手,本篇以博客园的编辑器为例,解决如何定位富文本,输入文本内容 一.加载配置 1.打开博客园写随笔,首先需要登录,这里为了 ...
- sql语句执行插入后返回ID
insert into table1(aaa,bbb) values('aaa','bbb') select @@identity
- c语言检测文件是否存在int __cdecl access(const char *, int);
最近写代码,遇到很多地方需要判断文件是否存在的.网上的方法也是千奇百怪,“百家争鸣”. fopen方式打开的比较多见,也有其他各种方式判断文件是否存在的,由于其他方法与本文无关,所以不打算提及. 笔者 ...
- python学习笔记-Day7
class Province: # 静态字段(类变量/属性) country ＝ '中国' def __init__(self, name): # 普通字段(实例变量/属性) self.name = ...
- libev 宏展开
想看源码,宏太多,看着累,宏展开,再看,功力时间不够,先放下 放上宏展开后的代码. libev4.20 展开方示为 ./configure 修改makefile文件,字符串 替换CC为 CPP 注意要 ...
- Spring 4 官方文档学习（十一）Web MVC 框架之编码式Servlet容器初始化
在Servlet 3.0+ 环境中,你可以编码式配置Servlet容器,用来代替或者结合 web.xml文件.下面是注册DispatcherServlet : import org.springfra ...