超级简单的手风琴效果

最新推荐文章于 2019-05-27 20:53:00 发布

原创最新推荐文章于 2019-05-27 20:53:00 发布 · 670 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #功能齐全 #简单 #手风琴效果

jq学习专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个简单的书签切换效果实现过程，通过jQuery操作DOM元素完成显示与隐藏的动画效果。作者分享了从开始尝试到最终解决问题的心路历程，特别强调了在不同元素间正确切换操作的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>测试</title>
   <script type="text/javascript" src="images/jquery.js"></script>
   <link rel="stylesheet" href="images/index.css">
</head>
<body>
		<div class="top">
		<li>
			<span>书签切换系列</span>	<p>-</p>
			<div class="main"></div>
		</li>
		<li><span>书签切换系列</span><p>-</p>
			<div class="main"></div>
		</li>
		<li><span>书签切换系列</span><p>-</p>
			<div class="main"></div>
		</li>
		</div>
   <script type="text/javascript" src="images/index.js"></script>
</body>
</html>

*{ margin:0; padding:0;}
	body{
		background-color: pink;
	}
	li{list-style: none;}
	
	.top{
		width: 450px;height: 35px;
	}
	.top li{
		background-color:yellow;border-top:1px solid gray;
	}
	.top span{
		font-size: 14px;line-height: 35px;margin:0 0 0 10px;
	}
	.top p{
		float: right;text-align: center;line-height: 35px;margin-right: 10px;
	}
	.top .main{
		width: 450px;height: 230px;background-color: green;display:none;
	}

$(function(){

	var top=$('.top');
	var li=$('li');
	var span=$('span');
	function play(n){
		li.eq(n).children('p').text("+").end().siblings().children('p').text("-");//用end结束返回li如何再从li的其他元素的子元素进行操作
		li.eq(n).children('.main').slideDown(200).end().siblings().children('.main').slideUp(200);
	}

   li.mouseenter(function(){  
        n=li.index($(this));  
        play(n);  
    }); 


})

以为是个很简单的效果，没想到花了70分钟左右，主要是在开始一直在同一个li下的元素里操作，而不是不同的元素里。导致一直会显示而不会隐藏。

要在一个li的元素操作完了以后再用end结束使用另外的li元素操作。不用end的话查找其他元素会很麻烦