Question

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

E.g。如果我点击第一个按钮它会向下滑动，然后如果我点击第二个按钮，第一个框会再次滑动？

这是我的代码

<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

好吧，你可以先把一些代码添加到.slideUp()每个其他面板中。你试过了吗？

Answer 2

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

$(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 3

为所有翻转提供一个公共类名：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");
  });
});

Answer 4

$(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()

Answer 5

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

请注意，仅当您为.panel和.flip元素分配了一个课程时才会这样做

jquery和jscript if else

5 个答案: