jquery和jscript

Question

我使用下面的代码在单击某些文本时显示一个框。我如何限制它，一次只能滑下一个盒子。

例如，如果我点击第一个按钮，它会滑下来，然后如果我点击第二个按钮，第一个框又会滑上来？

这是我的代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip1").click(function(){
    $(".panel1").slideDown("fast");
  });
});
$(document).ready(function(){
  $(".flip2").click(function(){
    $(".panel2").slideDown("fast");
  });
});
$(document).ready(function(){
  $(".flip3").click(function(){
    $(".panel3").slideDown("fast");
  });
});
$(document).ready(function(){
  $(".flip4").click(function(){
    $(".panel4").slideDown("fast");
  });
});
</script>



<div id="betslip">
                <td><div class="panel1"><?php echo $bet1; ?></div></td>
                <td><div class="panel2"><?php echo $bet2; ?></div></td>
                <td><div class="panel3"><?php echo $bet3; ?></div></td>
                <td><div class="panel4"><?php echo $bet4; ?></div></td>
            </div>

Answer 1

你可以像这样重构和最小化你的代码：

$(document).ready(function(){
  $("[class=^'flip'").click(function(){
    // get panel class
    var panelClass = this.className.replace('flip', 'panel');
    // hide all open
    $("[class^='panel']").hide();
    // show current one now
    $('.' + panelClass).slideDown('fast');
  });
});

这就是你所需要的。

Answer 2

那么，您可以从添加一些代码到.slideUp()每个其他面板开始。你试过了吗？

Answer 3

给所有的翻转一个通用的类名：flip

$('.flip').click(function(){
    $('.panel').slideUp('fast'):
});

这将SlideUp所有的面板，然后向下滑动你拥有的功能：

$(document).ready(function(){
  $(".flip1").click(function(){
    $(".panel1").slideDown("fast");
  });
});
$(document).ready(function(){
  $(".flip2").click(function(){
    $(".panel2").slideDown("fast");
  });
});
$(document).ready(function(){
  $(".flip3").click(function(){
    $(".panel3").slideDown("fast");
  });
});
$(document).ready(function(){
  $(".flip4").click(function(){
    $(".panel4").slideDown("fast");
  });
});