黑马程序员技术交流社区

标题: jquery侧边菜单栏的问题？ [打印本页]

作者: 石国庆 时间: 2013-4-22 21:46
标题: jquery侧边菜单栏的问题？
我想用jquery做个可以滑动的菜单栏，可是实在是不知道怎么选取当前选择的那个<p>标签，所以只好给他们取不同的id，不过这样很麻烦，如果有很多就要写很多次，所有有没有什么优化的方法？而且我开始的效果想要图1那样的，这段代码的实际效果是图2，如何在开始的时候设置一下？？

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#p1").click(function(){
$("#d1").slideToggle("slow");
  });
$("#p2").click(function(){
$("#d2").slideToggle("slow");
  });
$("#p3").click(function(){
$("#d3").slideToggle("slow");
  });
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<p id="p1" class="flip">1</p>
<div id="d1" class="panel">
<p>1.1</p>
<p>1.1</p>
</div>
<p id="p2" class="flip">2</p>
<div id="d2" class="panel">
<p>2.2</p>
<p>2.2</p>
</div>
<p id="p3" class="flip">3</p>
<div  id="d3" class="panel">
<p>3.3</p>
<p>3.3</p>
</div>

</body>
</html>

QQ截图20130422214503.jpg (15.81 KB, 下载次数: 28)

图1

2.jpg (13.14 KB, 下载次数: 34)

图2

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2