近来对Jquery比较感兴趣，常常被它的方便、简洁所折服。用尽可能少的JS代码做了一个折叠滑动菜单，来体验一下什么叫“Write Less，Do More”！。 先上Demo。
下面是代码部分
Home.Html文件
View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Jquery-折叠菜单 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Rex.Ye">
<meta name="Keywords" content="Jquery,插件">
<meta name="Description" content="">
<link href="Css/Home.css" rel="stylesheet" type="text/css">
<!-- <script src="Javascript/jquery-1.7.1.min.js"></script>-->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="Javascript/Home.js"></script>
</head>
<body>
<div id="" class="Content">
<div id="A" class="Slider">
<div id="" class="Title">
<span class="Text">It's First Title</span>
</div>
<div class="Item">
<div id="a" class="Detail">
<span class="ico"></span>
<a href="">这是第一个链接</a>
</div>
<div id="b" class="Detail">
<span class="ico"></span>
<a href="">这是第二个链接</a>
</div>
<div id="c" class="Detail">
<span class="ico"></span>
<a href="">这是第三个链接</a>
</div>
<div id="d" class="Detail">
<span class="ico"></span>
<a href="">这是第四个链接</a>
</div>
</div>
</div>
<div id="B" class="Slider">
<div id="" class="Title">
<span class="Text">It's Second Title</span>
</div>
<div class="Item">
<div id="a" class="Detail">
<span class="ico"></span>
<a href="">这是第一个链接</a>
</div>
<div id="b" class="Detail">
<span class="ico"></span>
<a href="">这是第二个链接</a>
</div>
<div id="c" class="Detail">
<span class="ico"></span>
<a href="">这是第三个链接</a>
</div>
<div id="d" class="Detail">
<span class="ico"></span>
<a href="">这是第四个链接</a>
</div>
</div>
</div>
<div id="C" class="Slider">
<div id="" class="Title">
<span class="Text">It's Thrid Title</span>
</div>
<div class="Item">
<div id="a" class="Detail">
<span class="ico"></span>
<a href="">这是第一个链接</a>
</div>
<div id="b" class="Detail">
<span class="ico"></span>
<a href="">这是第二个链接</a>
</div>
<div id="c" class="Detail">
<span class="ico"></span>
<a href="">这是第三个链接</a>
</div>
<div id="d" class="Detail">
<span class="ico"></span>
<a href="">这是第四个链接</a>
</div>
</div>
</div>
<div id="D" class="Slider">
<div id="" class="Title">
<span class="Text">It's Fouth Title</span>
</div>
<div class="Item">
<div id="a" class="Detail">
<span class="ico"></span>
<a href="">这是第一个链接</a>
</div>
<div id="b" class="Detail">
<span class="ico"></span>
<a href="">这是第二个链接</a>
</div>
<div id="c" class="Detail">
<span class="ico"></span>
<a href="">这是第三个链接</a>
</div>
<div id="d" class="Detail">
<span class="ico"></span>
<a href="">这是第四个链接</a>
</div>
</div>
</div>
</div>
</body>
</html>
Home.css文件
View Code
.Content
{
position:relative;
margin:100px auto;
width:200px;
height:350px;
background:#ccc;
overflow:hidden;
}
.Content .Slider .Title
{
height:30px;
background:green;
margin-top:2px;
text-align:center;
}
.Content .Slider .Title:hover
{
cursor:pointer;
}
.Content .Slider .Text
{
font-family:'Edwardian Script ITC';
font-size:23px;
color:#FFF;
}
.Content .Slider .Text:hover
{
font-size:25px;
}
.Content .Slider .Item
{
margin-left:30px;
display:none;
height:222px;
}
.Content .Slider .Item .Detail
{
line-height:30px;
}
.Content .Slider .Item .Detail .ico
{
width:10px;
height:10px;
background:red;
display:inline-block;
}
Home.js文件
View Code
$(function() {
$('.Content .Slider').click(function(){
$(this).find('.Item').slideToggle('fast').end().siblings().find('.Item').slideUp('fast'); /*这里主要用到四个Jquery方法
find():在子节点中查找所需要的元素
SlideToggle():以改变高度的方式来滑动切换元素的显隐状态
end():终止在当前链的最新过滤操作，并返回匹配的元素集合为它以前的状态
siblings():获得匹配元素集合中每个元素的兄弟元素，选择性筛选的选择器*/
})
})
posted @ 2012-01-15 17:51 Gamain 阅读(475) 评论(0) 编辑
小弟新手，用到的都是很基础的东西，没有什么好说的，直接上Demo，代码了，大家应该都能看懂。
一
二
三
四
五
六
非专业Js人士，代码写的比较乱 ，只是把效果做出来了，不知如何优化，请大家多多指点。
小弟第一次写博客，对编辑器的排版不太熟悉，不知道为什么编辑器的Html视图下帖不上CSS代码段， 折腾了半个小时还是无果，最后只能在html标签内用style=""来代替Css，才勉强把Demo放到博文里面。郁闷.............
Html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="Css/Home.css" rel="stylesheet" type="text/css">
<!-- <script src="Javascript/jquery-1.7.1.min.js"></script>-->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="Javascript/Home.js"></script>
</head>
<body>
<div class="ContentBox">
<div id="a" class="Box">
一
</div>
<div id="b" class="Box">
二
</div>
<div id="c" class="Box">
三
</div>
<div id="d" class="Box">
四
</div>
<div id="e" class="Box">
五
</div>
<div id="f" class="Box">
六
</div>
</div>
</body>
</html>
Home.css文件代码
.ContentBox
{
width:300px;
height:150px;
background:#333;
}
.Box
{
width:100px;
height:75px;
border:solid 1px;
color:#FFF;
position:absolute;
font-family:'微软雅黑';
}
.Box:hover
{
cursor:pointer
}
#a
{
background:red;
}
#b
{
background:green;
}
#c
{
background:purple;
}
#d
{
background:black;
}
#e
{
background:blue;
}
#f
{
background:gray;
}
Home.js文件代码
$(document).ready(function() {
var current = 0;
$('.Box').data('state', '1');
$('.Box').each(function() {
$(this).data('position', $(this).index())
});
$('.Box').each(function() {
$(this).css({
'left': $(this).index() % 3 * 100 + 7 + 'px',
'top': Math.floor($(this).index() / 3) * 75 + 7 + 'px'
})
});
$('.Box').click(function() {
current = $(this).data('position');
if ($(this).data('state') == '1' | $(this).data('state') == '3') {
$(this).prependTo('.ContentBox');
$(this).animate({
width: '200px',
height: '150px',
left: '7px',
top: '7px'
},
500).data('state', '2').siblings().each(function() {
$(this).animate({
width: '100px',
height: '30px',
left: '207px',
top: ($(this).data('position') < current ? $(this).data('position') : $(this).data('position') - 1) * 30 + 7 + 'px'
},
500)
}).data('state', '3');
} else if ($(this).data('state') == '2') {
$('.Box').each(function() {
$(this).animate({
'left': $(this).data('position') % 3 * 100 + 7 + 'px',
'top': Math.floor($(this).data('position') / 3) * 75 + 7 + 'px',
'height': '75px',
'width': '100px'
},
500)
}).data('state', '1');
}
})
})
posted @ 2012-01-12 23:09 Gamain 阅读(408) 评论(0) 编辑