jquery 多个div显示隐藏 点击全显示出来了 怎么解决

Question

<script language="javascript" type="text/javascript">
$(function(){
$(".lx1").hide();
$(".lx").click(function(){
$(".lx1").toggle(500);
}, function() {
$('.lx1').hide(500);
}
);

});
</script>

<div class="lx"> 类型：</div>
<div class="lx1"><a href="#">社区住宅</a><a href="#">社区住宅</a><a href="#">社区住宅</a>
</div>

<div class="lx"> 类型：</div>
<div class="lx1"><a href="#">社区住宅</a><a href="#">社区住宅</a><a href="#">社区住宅</a>
</div>

Answer 1

不是很理解你将function(){$('.lx1').toggle(500);}和function(){$('.lx1').hide(500);}一起放在click方法里的用意。前者将类名是lx1的元素隐藏/显示，后者将其隐藏……

而且你在html里“社区住宅”赋予的类名都是lx1，要显示的话当然会全部显示了。

你可以将两个分别赋予不同的类名，然后这样

$('.lx1').hide();                //第一个隐藏了
$('.lx').click(function()
{
    $('.lx1').toggle(500);      //点击lx后第一个显示
    $('.lx2').toggle(500);      //点击lx后第二个隐藏
});

Answer 2

$(function(){
  $(".lx1").hide();
  $(".lx").click(function(){
$(this).next(".lx1").toggle(500);
  });
});

如上代码可以解决。

追问

点击后一下前一隐藏后一下显示呢。要怎么解决

追答

麻烦描述清楚一些，没看明白这句话

追问

就是一个隐藏一个显示的效果

追答

$(function(){
$(".lx1").hide();
$(".lx").click(function(){
$(".lx1").hide(500);
$(this).next(".lx1").toggle(500);
});
});

追问

完美解决，next就是说选取紧邻当前元素 ，如果是初始化第一个就显示呢

追答

$(function(){
$(".lx1").eq(0).show().siblings(".lx1").hide();
$(".lx").click(function(){
$(".lx1").hide(500);
$(this).next(".lx1").toggle(500);
});
});

顺便说一下，next是指紧邻的下一个同级元素，相反的prev是指紧邻的上一个同级元素

Answer 3

先将层属性设置为隐藏，然后用一个button按钮，按钮写一个function，功能是点击按钮，则设置层属性为显示就ok了，如果不懂，那先去学了再说吧