我想用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>
|
|
收藏
淘帖
踩
