怎么做显示隐藏多个类

时间:2011-12-29 11:27:55

标签: javascript jquery

我已经完成了一个类别的代码,因此我需要使用相同的代码对另一个类别执行相同的操作...可以建议使用多个类别容器的任何最短格式。

例如:我的符号是一个类别所以我需要为另一个类别“我的美元”做这样的方式

Jquery的

$('.my-symbols .show').click(function(){
 $('.my-symbols .container').show(500);
 });
 $('.my-symbols .hide').click(function(){
 $('.my-symbols .container').hide(300);
 });

CSS

#charts .my-symbols{
width:59%;
float:left;
margin-left:0.5%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background:#666666;
padding:0.5%;
}
#charts .my-symbols .show{
width:10px;
height:10px;
background:url(../../images/blockopen.png) no-repeat;
float:right;
/*padding:10px 10px 10px 10px;*/
border:none;
top:-10px;
padding:10px 10px 10px 10px;
position:relative;
}
#charts .my-symbols .hide{
width:10px;
height:10px;
background:url(../../images/blockclose.png) no-repeat;
position:relative;
top:0;
right:0;
float:right;
padding:10px 10px 10px 10px;
border:none;
} 
#charts .my-symbols .container{
display:none;
position:absolute;
padding:1%;
background:#454545;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
z-index:1;
}

1 个答案:

答案 0 :(得分:0)

我建议您为所有类别项添加另一个类,让我们称之为类别。然后根据你提供的CSS显示的DOM结构,我想你可以这样做:

$('.category .show').click(function(){
   $(this).parents(".category").find(".container").show(500);
});
$('.category .hide').click(function(){
  $(this).parents(".category").find(".container").hide(300);
});

修改

添加了一个使用我的示例的小提琴,有两个类别: http://jsfiddle.net/coffe_e/c8Tgf/1/