Question

我遇到了问题。 “显示更多”旁边有一个图标。按下它时会消失，因为innerText会被替换，所以我尝试了这个：

 document.getElementById("toggleButton").innerText = "Show Less <i class="fas fa-caret-down"></i>" ;

这似乎没有任何建议吗？

var status = "less";

function toggleText()


{
    
    if (status == "less") {
        document.getElementById("textArea").style.display = "block";
        document.getElementById("toggleButton").innerText = "Show Less";
        status = "more";
    } else if (status == "more") {
        document.getElementById("textArea").style.display = "none";
        document.getElementById("toggleButton").innerText = "Show More";
        status = "less"
    }
	
}

<!DOCTYPE html>
<html>
<head>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>

<div id="textArea" style="display: none;">
    test
</div>

<button type="button" id="toggleButton" onclick="toggleText();" href="javascript:void(0);">Show More <i class="fas fa-caret-down"></i></button>

<div id="textArea" style="display: none;"> 

</div
</body>
</html>

Answer 1

如果文本字符串包含需要呈现的html，则需要使用innerHTML而不是innerText：

document.getElementById("toggleButton").innerHTML

Answer 2

我建议改为转换一个类，这里结合了两个文本变体的伪。

Stack snippet

function toggleText()
{    
    document.getElementById("textArea").classList.toggle('hide');
    document.getElementById("toggleButton").classList.toggle('less');
}

button::before {
  content: 'Show more ';
}
button.less::before {
  content: 'Show less ';
}

.textarea.hide {
  display: none;
}

<div id="textArea" class="textarea hide">
    test
</div>

<button type="button" id="toggleButton" onclick="toggleText();"><i class="fas fa-caret-down"></i></button>

<div id="textArea2" class="textarea hide">

</div>

使用CSS attr()，您可以使用data-*属性控制标记中的文本，此处结合addEventListener，这是添加事件处理程序的推荐方法，例如click事件。

Stack snippet

var btn = document.querySelector('#toggleButton');

btn.addEventListener('click', function(e) {
  document.getElementById("textArea").classList.toggle('hide');
  this.classList.toggle('less');
})

button::before {
  margin-right: 5px;             /*  space between text/icon  */
  content: attr(data-more);      /*  get text from attribute  */
}

button.less::before {
  content: attr(data-less);
}

.textarea.hide {
  display: none;
}

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<div id="textArea" class="textarea hide">
  test
</div>

<button type="button" id="toggleButton" data-less="Show less" data-more="Show more"><i class="fas fa-caret-down"></i></button>

<div id="textArea2" class="textarea hide">

</div>

Answer 3

问题是你要在这里替换按钮的全部内容：

document.getElementById("toggleButton").innerText = "Show Less";

您只用"Show Less"覆盖原始文字和图标。

要解决此问题，您可以使用innerHTML来设置新文本和图标的HTML：

buttonText.innerHTML = `Show Less <i class="fas fa-caret-up"></i>`;

或者您也可以将文本包装在另一个元素中以仅更改该部分：

const button = document.getElementById("button");
const buttonText = document.getElementById("buttonText");
const more = document.getElementById("more");

let hidden = true;

button.onclick = () => { 
  if (hidden) {
    more.style.display = "block";
    buttonText.innerText = "Show Less";
    buttonText.nextElementSibling.setAttribute("data-icon", "caret-up");
    hidden = false;
  } else {
    more.style.display = "none";
    buttonText.innerText = "Show More";
    buttonText.nextElementSibling.setAttribute("data-icon", "caret-down");
    hidden = true;
  }
};

<!DOCTYPE html>

<html>

<head>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
  
<body>

  <button id="button">
    <span id="buttonText">Show More</span>
    <i id="buttonIcon" class="fas fa-caret-down"></i>
  </button>

  <p id="more" style="display: none;">
      MORE
  </p>

</body>

</html>

Answer 4

为什么不使用unicodes呢？ ⮟⮋这和文字一样简单！

留下一些向下的箭头：

this.props.dispatch(push('/sandwich'))

Hex：2B9F | 12月：11167

修改：删除了完整列表。

生成于：https://github.com/webdev23/unicode

将图标放在按钮旁边

4 个答案: