Question

我是所有这一切的新手所以请原谅任何滥用条款的行为。

我已经在我的wordpress网站上添加了一个切换来隐藏文本的长篇部分，它似乎工作得很好。

我想添加一个翻转的箭头，具体取决于该部分是否打开。我的问题是箭头来回翻转，无论切换到哪个部分，我都不知道如何解决这个问题。

JS：

function toggle(id) {
var element = document.getElementById(id);
var text = document.getElementById("arrow");
if (element) {
    var display = element.style.display;

    if (display == "none") {
        element.style.display = "block";
      text.innerHTML = "&#9650;";

    } else {
        element.style.display = "none";
      text.innerHTML = "&#x25bc;";
    }
}
}

HTML：

<h4>Procedure</h4>
<h4 onclick="toggle('telnetPrint')">Telnet<a id="arrow">&#x25bc;</a></h4>
<div id="telnetPrint" style="display: none;">
<ol>
<li>fjkldsaj;lkf</li>
</ol>
<h4 onclick="toggle('telnetPrint')">Hide -</h4>
</div>
<p> </p>
<h4 onclick="toggle('linuxPrint')">Linux Computer&#x25bc;</h4>
<div id="linuxPrint" style="display: none">
<ol>
<li>fjkldsjfklsa</li>
</ol>
<h4 onclick="toggle('linuxPrint')">Hide -</h4>
</div>

如果有人可以提供帮助，我会非常感激。

P.S。请不要jQuery

Answer 1

看起来你正在调用相同的＆＃34;箭头＆＃34;。您只为Telnet设置了箭头。您也可以向linuxPrint添加箭头。我会将它们标识为：

<a id="arrowtelnetPrint"></a>

和

<a id="arrowlinuxPrint"></a>

这样你就可以使用＆＃34; id＆＃34;改变正确的。这是jsfiddle：

https://jsfiddle.net/ezdrhLtr/2/

这将包含完整的代码，只需稍作调整即可切换两个箭头。

Answer 2

var text = document.getElementById("arrow"); 您使用id＆＃39;箭头＆＃39;来引用元素。每次执行切换功能时，您都会使用id＆＃39;箭头＆＃39;翻转元素。你可以做的是传递一个布尔值来知道它是否被翻转

<h4 onclick="toggle('telnetPrint',true)">Telnet<a id="arrow">&#x25bc;</a></h4>

并在您的脚本中

function toggle(id, flipOrNot) {
var element = document.getElementById(id);
var text = document.getElementById("arrow");
if (element) {
    var display = element.style.display;

    if (display == "none") {
        element.style.display = "block";   
        if(flipOrNot){

           text.innerHTML = "&#9650;";
        }

    } else {
        element.style.display = "none";
      if(flipOrNot){

          text.innerHTML = "&#x25bc;";
      }
    }
}
}

对于其他元素，你可以做到

<h4 onclick="toggle('linuxPrint',false)">Hide -</h4>

防止翻转

无论打开哪个部分，切换图标都会翻转

2 个答案: