Question

我有两个元素一个在另一个之上：

<form class="order-form"></form>
<a href="#" class="hide-details">Hide Details</a>

我正在使用jQuery slideToggle：

  // Show/Hide Details
   $("a.hide-details").click(function () {
    $(".order-form").slideToggle(0);
   });

我想在折叠表单后将文本“隐藏详细信息”更改为“显示详细信息”。当表单扩展时，我想再次将文本更改为“隐藏详细信息”。

有任何建议可以实现这一目标吗？

Answer 1

只需更改锚点的文字：

// Show/Hide Details
$("a.hide-details").click(function () {
  var $this = $(this);
  $this.prev(".order-form").slideToggle(0, function() {
    $this.text($(this).is(':visible') ? "Show details": "Hide details");
  });
});

编辑 prev获取上一个表单

Answer 2

如果将函数传递给slideToggle，它将在完成后执行。一旦发生这种情况，您可以检查它是否隐藏，然后显示相应的文本。

代码未经测试：）

// Show/Hide Details
$("a.hide-details").click(function () {
    $(".order-form").slideToggle(0,function(){
        if ($(this).is(":hidden")) $(".hide-details").html("Show Details");
        else $(".hide-details").html("Hide Details");
    });
});

P.S。如果您只想切换没有动画.toggle()的元素的可见性，那将会有效。

Answer 3

 $("a.hide-details").click(function () {       
                var txt=$(this).text(); 
                (txt == 'Hide Details') ? txt='Show details':txt='Hide Details';
                $(".order-form").slideToggle(400,function(){        
                    $("a.hide-details").text(txt);
            });
        });

更改触发jQuery slideToggle的单击链接的文本？

3 个答案: