看到Jquery手风琴效果很爽,可是不会用.悲催,只能自己写了
写了好久。现在就做成这样了.但是如果代码扩展了就又要重新设计了
求大大们帮我精简下代码,做成可以任意扩展的代码,如删除一个li或者增加一个都不会有bug
一些是所有代码,可以复制运行看一看效果<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script src="file:///E|/Code_source/Web/jquery/js/jquery-1.7.2.js"></script></head>
<style>
.c{
width:740px;
overflow:hidden;
}
.main{
width:4000px;
}
li{
float:left;
width:50px;
list-style:none;
}
li div{
width:500px;
height:200px;
}
.red{
background:red;
}
.yellow{
background:yellow;
}
.blue{
background:blue;
}
.black{
background:black;
}
.green{
background:green;
}
</style>
<body>
<div class="c">
<ul class="main">
<li style="width:500px"><div class="red"></div></li>
<li><div class="yellow"></div></li>
<li><div class="blue"></div></li>
<li><div class="black"></div></li>
<li><div class="green"></div></li>
</ul>
</div>
<script>
$("li").click(function(e){
var allWidth="50px";
var thisWidth="500px";
//$("li").css("width", allWidth);
//$(this).css("width", thisWidth);
var index=$(this).index();
$("li").stop();
if(index==$("li").length-1||index==$("li").length-2){
$(this).animate({"width":thisWidth},500).prevAll().animate({"width":allWidth},500);
}
else if(index==$("li").length-3){
$(this).animate({"width":thisWidth},500).prevAll().animate({"width":allWidth},500).nextUntil("li:eq("+index+")").next().nextAll("li:!eq("+index+")").animate({"width":allWidth},500);
}
else if(index==0){
$(this).animate({"width":thisWidth},500).nextAll().animate({"width":allWidth},500);
}
else{
$(this).animate({"width":thisWidth},500).prev().animate({"width":allWidth},500).next().nextAll().animate({"width":allWidth},500);
}
});
</script>
</body>
</html>麻烦各位了原创:http://www.zhjie.net
写了好久。现在就做成这样了.但是如果代码扩展了就又要重新设计了
求大大们帮我精简下代码,做成可以任意扩展的代码,如删除一个li或者增加一个都不会有bug
一些是所有代码,可以复制运行看一看效果<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script src="file:///E|/Code_source/Web/jquery/js/jquery-1.7.2.js"></script></head>
<style>
.c{
width:740px;
overflow:hidden;
}
.main{
width:4000px;
}
li{
float:left;
width:50px;
list-style:none;
}
li div{
width:500px;
height:200px;
}
.red{
background:red;
}
.yellow{
background:yellow;
}
.blue{
background:blue;
}
.black{
background:black;
}
.green{
background:green;
}
</style>
<body>
<div class="c">
<ul class="main">
<li style="width:500px"><div class="red"></div></li>
<li><div class="yellow"></div></li>
<li><div class="blue"></div></li>
<li><div class="black"></div></li>
<li><div class="green"></div></li>
</ul>
</div>
<script>
$("li").click(function(e){
var allWidth="50px";
var thisWidth="500px";
//$("li").css("width", allWidth);
//$(this).css("width", thisWidth);
var index=$(this).index();
$("li").stop();
if(index==$("li").length-1||index==$("li").length-2){
$(this).animate({"width":thisWidth},500).prevAll().animate({"width":allWidth},500);
}
else if(index==$("li").length-3){
$(this).animate({"width":thisWidth},500).prevAll().animate({"width":allWidth},500).nextUntil("li:eq("+index+")").next().nextAll("li:!eq("+index+")").animate({"width":allWidth},500);
}
else if(index==0){
$(this).animate({"width":thisWidth},500).nextAll().animate({"width":allWidth},500);
}
else{
$(this).animate({"width":thisWidth},500).prev().animate({"width":allWidth},500).next().nextAll().animate({"width":allWidth},500);
}
});
</script>
</body>
</html>麻烦各位了原创:http://www.zhjie.net
li div{
height:200px;
}
//JS修改
$("li").click(function(e){
var allWidth="50px";
var thisWidth="500px";
var current=$(this);//保存点击的对象
$(this).parent().children().each(function(){
if($(current).html()==$(this).html())//判断是否是点击的对象
if($(this).width()+"px"==allWidth)
$(this).animate({"width":thisWidth},1000);
else
$(this).animate({"width":allWidth},1000);
else
$(this).animate({"width":allWidth},1000);
});
});