Javascript-更改文本函数问题

Question

新手javascript问题：我已经创建了一个容器，并对它们进行了编码，这样当单击箭头时，容器就会展开/折叠以显示内容。但是，我想添加一个功能，单击时箭头的方向也会发生变化。

以下是我正在寻找的东西的概述：

1. 单击，展开容器以显示隐藏的内容
2. 将箭头从向下箭头(代码=&或；(更改为向上箭头(代码=&和；(
3. 将相同的css样式应用于向上箭头
4. 单击时，折叠容器以隐藏内容
5. 将箭头从向上更改为向下

这是迄今为止我已经开始工作的代码，一旦单击箭头，容器就会展开/折叠：

<script type="text/javascript"> 
function myFunction() {
var x = document.getElementById("this-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script> 

我尝试过其他javascript行来让箭头改变方向，但没有成功。这种工作是使用javascript代码在点击时更改文本。。然而，这样做取消了扩展/折叠功能，并且它更改为的文本没有采用设置的css样式。

如有任何帮助，我们将不胜感激！！：(

---

@epascarello谢谢你的提示，我认为这实际上可能是最简单的选择。我做了一些关于如何使用toggle类的研究，然而，我认为我可能把它集成到我当前的代码中是错误的？这是新代码：

<script type="text/javascript"> 
function myFunction() {
var x = document.getElementById("this-container");
if (x.style.display === "none") 
{x.style.display = "block";x.toggleClass("drop-btn-do-down drop-btn-do-up");} 
else {x.style.display = "none";}
}
</script>

下拉功能有效，但箭头方向不变。

Answer 1

快速预感。

<div id="arrow" onclick="javascript:myFunction()"></div>
<div id="this-container"></div>

#this-container {
display: none;
}
#this-container.expand {
display: block;
}
#arrow.expand {
transform: rotate(180deg);
}

function myFunction() {
var container = document.getElementById("this-container");
var containerClassList = container.classList;
var arrow = document.getElementById("arrow");
var arrowClassList = arrow.classList;
if (!containerClassList.contains('expand')) {
containerClassList.add('expand');
arrowClassList.add('expand');
} else {
containerClassList.remove('expand');
arrowClassList.remove('expand');
}
}

Answer 2

非常感谢大家的帮助。。。以下是最终对我有效的解决方案(以备将来有人需要时参考(：

---

箭头按钮的HTML代码：

<p id="drop-btn" class="drop-down" onclick="myFunction();secondFunction();">&or;</p>

---

箭头按钮的CSS样式：

#drop-btn p{
cursor: pointer;
font-size: 2.2em;
font-weight: bold;
margin-top: 32px;
margin-bottom: 32px;
line-height: 0;
}
.drop-down {
color: #fff;
}
.drop-up{
color: #fff;
margin-right: 90%;
transform: rotate(180deg);
}

---

箭头按钮的Javascript：

<script type="text/javascript"> 
function myFunction() {
var x = document.getElementById("container-with-content");
if (x.style.display === "none") 
{x.style.display = "block";} 
else {x.style.display = "none";}
}
function secondFunction(){
var z = document.getElementById("drop-btn");
if (z.className == "drop-down"){
z.className = "drop-up";} 
else {
z.className = "drop-down";}
}
</script>