Jquery滑动隐藏元素onclick

时间:2012-08-11 06:53:49

标签: javascript jquery html

我有像这样的hmtl结构,无限次重复

 <div class='rr'>
  <div class='rrclk'>
   Click Me
  </div>
  <div class='rrshow'>
    I am now shown
   </div>

有没有办法只显示被点击的rrclk的父级中的rrshow?因此,如果您单击一个rrclk,则只会显示同一个rr中的rrshow,如果这有任何意义的话。

由于

编辑:

谢谢,有什么方法可以用AJAX做同样的事情,比如:

$('.rrclk').click(function () {
    $.ajax({
        type: "POST",
        url: 'getdata.php',
        data: {
            uid: this.id
        },
        success: function (data) {
   $(this).parent().find(".rrshow").html(data);
   $(this).parent().find(".rrshow").fadeToggle("fast");
        }
    });

5 个答案:

答案 0 :(得分:2)

希望这是你想要的

$(".rrclk").click(function(){
   //hide all rrshow
   $(".rrshow").hide();

   //show only required rrshow
   $(this).parent().find(".rrshow").show();
});

这是 demo

答案 1 :(得分:0)

$('.rrclk').click(function() {
    $(this).next().show();
});

答案 2 :(得分:0)

$('.rr .rrclk').click(function(){
   $(this).siblings('.rrshow').toggle();
});

答案 3 :(得分:0)

通过使用jQuery show()和hide()方法,你可以解决这个问题, 首先为div设置一个id

$("# place rrshow id here").show();
$("# place rrshow id here").hide();


$("#place rrclk id here").click(function(){
//$("# place rrshow id here").show(); or $("# place rrshow id here").hide(); whatever you want
});

答案 4 :(得分:0)

$('.rrclk').click(function(){
$(this).siblings('.rrshow').show();
});

如果我理解正确的话,你可以使用这个jquery,

这是一个JSFIDDLE http://jsfiddle.net/fb4gr/