Javascript jQuery toggleClass起作用，单击时添加.text（）替换会破坏它

全部-

我似乎有一个有趣的问题需要解决，单击按钮不仅会在其下方显示/隐藏一个div（因此按钮上的ID值），而且还必须更改按钮内的文本以及合金图标，以便从图标折叠到图标折叠顶部（请参阅此处的更多信息：）

HTML

<div class="button-holder">
    <button class="btn btn-primary toggle-hidden" id="1">Expand
        Options <span class="icon-collapse"></span></button>
</div>

问题是，如果我注释掉.text（）替换代码（这是可行的），那么.toggleClass（）代码将再次开始工作。使用.text（）代码，在Chrome开发者工具中进行调查时，文本替换将导致标记消失。在切换几次后，它将如下所示，不包括跨距：

<button class="btn btn-primary toggle-hidden" id="1">Minimize Options</button>

最小化选项

我试着看看是否可以将span添加到文本替换代码中，但是您只需要在按钮中获得实际文本

---

有没有办法防止.text（）替换也删除span后面的span（这会导致图像位于此按钮的末尾）？也欢迎您提出其他想法或建议。

在替换文本之前，您可以保留一份span的副本，然后再将其附加到后面。差不多

$(".toggle-hidden").click(function(e) {
    e.preventDefault();
    var text = $(this).text();
    var $span = $(this).find("span");
    $(this).text(
        text == "Minimize Options" ? "Expand Options" : "Minimize Options");

    $(this).append($span);
    $(this).find("span").toggleClass("icon-collapse");
    $(this).find("span").toggleClass("icon-collapse-top");

    $("#hidden-" + e.target.id).toggle(250);

});

---

您可以在替换文本之前保留跨距的副本，然后再将其追加。差不多

$(".toggle-hidden").click(function(e) {
    e.preventDefault();
    var text = $(this).text();
    var $span = $(this).find("span");
    $(this).text(
        text == "Minimize Options" ? "Expand Options" : "Minimize Options");

    $(this).append($span);
    $(this).find("span").toggleClass("icon-collapse");
    $(this).find("span").toggleClass("icon-collapse-top");

    $("#hidden-" + e.target.id).toggle(250);

});

---

您可以通过以下方式选择按钮的文本：

$（this）.contents（）.first（）[0]。textContent

$（“.hidden group”）.hide（）；
$（“.toggle hidden”）。单击（函数（e）{
event.preventDefault（）；
var text=$（this）.contents（）.first（）[0].textContent；
$（this）.contents（）.first（）[0].textContent=
text==“最小化选项”？“扩展选项”：“最小化选项”；
$（this.find（“span”）.toggleClass（“图标折叠”）；
$（this.find（“span”）.toggleClass（“图标折叠顶部”）；
$（“#隐藏-”+e.target.id）.toggle（250）；
});

扩大
选项*Span内容*
您可以这样选择按钮的文本
$（this）.contents（）.first（）[0].textContent



$（“.hidden group”）.hide（）；
$（“.toggle hidden”）。单击（函数（e）{
event.preventDefault（）；
var text=$（this）.contents（）.first（）[0].textContent；
$（this）.contents（）.first（）[0].textContent=
text==“最小化选项”？“扩展选项”：“最小化选项”；
$（this.find（“span”）.toggleClass（“图标折叠”）；
$（this.find（“span”）.toggleClass（“图标折叠顶部”）；
$（“#隐藏-”+e.target.id）.toggle（250）；
});

扩大
选项*Span内容*
将您的文本内容放在自己的
中，然后将其替换为我会弄乱的部分-我在某一点上对整个内容有一个跨度，但随后它应用了我不希望应用到文本的样式，以及将图标移到文本的左侧而不是右侧，就像我现在看到的那样。尽管如此，可能还是要这样做。把你的文本内容放在它自己的
中，然后把它替换掉。我会把它弄得有点乱-我在某一点上对整个内容有一个跨度，但它应用了我不想在文本中使用的样式，以及将图标移到文本的左侧而不是右侧，就像我现在看到的那样。尽管如此，可能还是要做些类似的事情。