Question

我知道这个问题曾经被问过，但是我找不到我需要的解决方案。

我正在尝试将网站here上的“ 产品详细信息”按钮设置为“显示更多/显示更少”的切换按钮，并带有背景线性淡入淡出。当前，单击按钮 animates 可以显示我想要的详细信息，但是该按钮消失了，您无法切换回以再次将其关闭。

这是我的JQuery代码：

jQuery(document).ready(function( $ ){
  $('#hiddenBlock').animate({height: '150px'});

  $('#showBlock').click(function(e) {
      e.preventDefault();
  $('#hiddenBlock').animate({height: '100%'}, "slow");
    });
    });

我想念什么？我尝试使用.toggle（）代替动画-这没用。

Answer 1

感谢您的提问。您可以做一件事，首先更改按钮的文本
onclick而不是将其隐藏：

$("button").on('click', function(){ 
  $(this).toggleClass("see-more"); 
});
$(".see-more").text("See Less");

Answer 2

实际上，如果在检查工具中看到，则按钮隐藏在“您可能也喜欢” div后面。您需要通过#showBlock div

中的 top：-100px或margin-top：-100px 来提高其位置

Answer 3

我仍然无法正确理解。这就是我现在所拥有的...

jQuery（document）.ready（function（$）{

 $('#hiddenBlock').animate({height: '200px'});

$("#showBlock").click(function(ev){
        ev.preventDefault();
        $("#hiddenBlock").animate({height: '100%'});
    });
    $("#showBlock").click(function(ev){
        ev.preventDefault();
          $("#hiddenBlock").animate({height:'200px'});
    });
});

使用“切换动画”按钮单击

3 个答案: