尝试将toggleClass与slideDown组合以显示Div

Question

我有一系列嵌套在div中的按钮，我试图在点击每个按钮时显示第二个div，比如this page中间的网格按钮。

我正在尝试使用toggleClass在可见和隐藏之间切换div，这很好。一旦按下按钮，我似乎无法让div滑下来。第二次单击按钮时，它可以正常工作，但只有这样。

有什么建议吗？

$(function(){

$("#toprow #button1").click(function(){
$("#hiddentext1").toggleClass("showhiddentext1");
$("#hiddentext1").slideDown(500);
});

});

https://jsfiddle.net/bwoo5789/zhmowu39/

Answer 1

如果您希望在按下按钮时向上/向下切换文字，则可以使用slideDown和slideUp方法。切换可见性不是必需的，因为slideDown会为您做到这一点。

Fiddle

$(function(){
    $("#toprow #button1").click(function(){     
    if($("#hiddentext1").is(':hidden')){
      $("#hiddentext1").slideDown(500);
    }else{
      $("#hiddentext1").slideUp(500);
    }    
  });  
});

在overflow: hidden完成时，将slideDown添加到div会消除跳转效果。