Question

当我点击展开/折叠div时，我正试图切换文字。我写了一半的代码切换div并单向更改为文本，但我试图弄清楚如何有效地“重置”以便用户来回切换（在“Less Info - ”之间）和“更多信息+”）。

到目前为止，这是代码：

$("a.more_info").click(function(){
    $(this).toggleClass("clicked").next().slideToggle(1000);
$(this).replaceWith("<a class='more_info' href='#'>Less Info -</a>");
return false; //Prevent the browser jump to the link anchor
});

由于

编辑：相关标记如下所示：

<a class="more_info" href="#">More Info +</a>
<div class="project_toggle">
    <h6>Hello</h6>
</div>

Answer 1

您可以改为更改当前链接的文本而不是替换元素...

$("a.more_info").click(function(){
    var $this = $(this);
    $this.toggleClass("clicked").next().slideToggle(1000);
    $this.text($this.is(".clicked") ? "Less Info -" : "More Info +");
    return false; //Prevent the browser jump to the link anchor
});

当然，您可能需要根据点击的含义来反转text()方法中的逻辑。

jQuery切换文本

1 个答案: