JQuery实现QQMenu菜单收缩滑动效果

最新推荐文章于 2020-09-16 09:39:02 发布

hikevin17

最新推荐文章于 2020-09-16 09:39:02 发布

阅读量1.1k

点赞数

文章标签： jquery function class server div css

本文链接：https://blog.csdn.net/hikevin17/article/details/6507233

版权

今天继续学习JQuery，试着做了一个QQMenu的效果。行为页面中的JQuery代码非常少，其中主要得力于JQuery中一个滑动效果slideDown()方法就实现了收缩，其它都是通过show()方法和show()的交替来实现的，我是比较喜欢用这个方法的，老师喜欢用css样式来控制相关元素的隐藏，呵呵，但终效果一样是差不多的，另外我发现JQuery中的选择的方法是非常灵活多样的，在API中写了很多方法，如果用得巧妙和话，会使代码量大大减少。

同时，我发现了在靠近标准设计的理念中，div,ul,li三者的嵌套关系是不能太过于复杂的，大致只能div-ul-li这样嵌套，如果要在li中嵌套div是不允许的，在ie8中显示是错乱的，在某些低版本的浏览器中会正常显示。但是，还是向标准靠拢好吧。我只好把应该嵌套的ul换成div了，这样就好了。除了使用slideDown()方法，我还第一次使用了hover()方法来控制悬停在li上的高亮显示效果，在文末我会附上效果图的。好了，现在将代码贴在下面，JQuery的笔记已经写过两篇了，一切基本的创建文件夹和文件的方法就不再赘述了，再提醒一下，一样要把JQuery代码库复制到JScript 文件中。

Default.aspx 代码：

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>QQMenu菜单收缩滑动效果</title>
<link href="Css/Site.css" type="text/css" rel="stylesheet" />
<script language="ecmascript" type="text/javascript" src="Jscript/jquery126.js"></script>
<script language="ecmascript" type="text/javascript" src="Jscript/JScript.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="main">
<div id="t1" class="ltag">
我的好友</div>
<div id="gf" class="hidden" style="display: block;">
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
</div>
<div id="t2" class="ltag">
我的同事</div>
<div id="gw" class="hidden">
<ul>
<li>南瓜</li>
<li>东瓜</li>
<li>西西</li>
</ul>
</div>
<div id="t3" class="ltag">
我的同学</div>
<div id="gc" class="hidden">
<ul>
<li>组长</li>
<li>主管</li>
<li>经理</li>
</ul>
</div>
<div id="t4" class="ltag">
我的家人</div>
<div id="fy" class="hidden">
<ul>
<li>爸爸</li>
<li>妈妈</li>
<li>姐姐</li>
</ul>
</div>
</div>
</form>
</body>
</html>

Css文件夹下的Site.css代码如下：

Code:

body
{
width:800px;
margin:0 auto;
}
#main
{
margin:20px;
width:200px;
border-left:solid 1px #69bff4;
border-right:solid 1px #69bff4;
}
.ltag
{
margin:0px;
font-size:14px;
line-height:26px;
background-image:url(Images/tag_bg.gif);
background-repeat:repeat-x;
border-top:solid 1px #69bff4;
border-bottom:solid 1px #69bff4;
border-collapse:collapse;
cursor:default;
}
.hidden
{
margin:0px;
display:none;
height:200px;
background-color:#c7def0;
border-bottom:solid 1px #69bff4;
}
ul
{
margin:0;
}
li
{
display:block;
padding:6px;
margin-left:-40px;
width:117%;
line-height:20px;
font-size:14px;
list-style:none;
cursor:default;
}
.lb
{
font-size:18px;
background-color:#098df2;
}

JScript文件夹下的JScript.js代码，这些是用JQuery写的，精华也在里了，呵呵。

Code:

// JScript 文件
$(document).ready(function(){
$("#t1").bind("click",function(){$("#gf").slideDown("slow");$(".hidden").hide();});
$("#t2").bind("click",function(){$("#gw").slideDown("slow");$(".hidden").hide();});
$("#t3").bind("click",function(){$("#gc").slideDown("slow");$(".hidden").hide();});
$("#t4").bind("click",function(){$("#fy").slideDown("slow");$(".hidden").hide();});
$("#main li").hover(function(){$(this).addClass("lb");},function(){$(this).removeClass();});
});