超级简单的手风琴效果

来源：互联网发布：bluetooth网络连接设置编辑：程序博客网时间：2024/05/22 10:47

<!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的话查找其他元素会很麻烦

阅读全文

0 0