Javascript jquery和jscript if else

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

例如，如果我单击第一个按钮，它会向下滑动，如果我单击第二个按钮，第一个框会再次向上滑动

这是我的密码

<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>

$（文档）.ready（函数（）{
$（“.flip1”）。单击（函数（）{
$（“.panel1”）。向下滑动（“快速”）；
});
});
$（文档）.ready（函数（）{
$（“.flip2”）。单击（函数（）{
$（“.panel2”）。向下滑动（“快速”）；
});
});
$（文档）.ready（函数（）{
$（“.flip3”）。单击（函数（）{
$（“.panel3”）。向下滑动（“快速”）；
});
});
$（文档）.ready（函数（）{
$（“.flip4”）。单击（函数（）{
$（“.panel4”）。向下滑动（“快速”）；
});
});

好吧，您可以先在

.slideUp（）

其他每个面板中添加一些代码。您试过了吗？

您可以像这样重构并最小化代码：

$(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');
  });
});

---

这就是您所需要的。

为所有翻转指定一个通用类名：

flip

：

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

这将滑动所有面板，然后使用您拥有的功能向下滑动：

$(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");
  });
});

只需使用一个

document.ready（）

---

请注意，只有在为

.panel

和

元素分配了一个类时，这才有效。flip

元素

我已经添加了幻灯片，但一旦它向下滑动，它就会立即向上滑动。我想你指的是只有一个类，而不是多个类。

$(document).ready(function(){
    $(".flip1").click(function(){
        $("div[class^=panel]").slideup();
        $(".panel1").slideDown("fast");
    });

    $(".flip2").click(function(){
        $("div[class^=panel]").slideup();
        $(".panel1").slideDown("fast");
    });

    // Do the rest
});

$(document).ready(function(){
  $('[class^="flip"]').click(function(){
      var thisId = $(this).attr('class').replace('flip');
      $('[class^="panel"]').slideUp("fast");
      $('.panel'+thisId).slideDown("fast");
  });
});