如何引用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实现下拉列表，点击展开，点击关闭。

秒客网

如何引用jQuery实现下拉列表，点击展开，点击关闭。

相关文章