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

I am new to all of this so please excuse any misuse of terms.

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

I have added a toggle to my wordpress site to hide long sections of text and it seems to work just fine.

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

I wanted to add an arrow that flips depending on whether the section is open or not. My problem is the arrow flips back and forth no matter what section is toggled and I don't know how to fix that.

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

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>

If anyone can help, I'd greatly appreciate it.

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

p.s. no jQuery please

附:请不要jQuery

2 个解决方案

#1

It looks like you are calling the same "arrow". You only have arrow set for Telnet. You can add an arrow as well to linuxPrint. I would ID them as :

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

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

and

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

That way you can use the "id" to change the correct one. Here is the jsfiddle:

这样你就可以使用“id”来改变正确的。这是jsfiddle:

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

This will have the full code, with minor adjustments, that toggle both arrows.

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

#2

var text = document.getElementById("arrow"); you are referencing an element with id 'arrow'. Everytime the toggle function is executed, you will flip the element with id 'arrow'. What you can do is pass a boolean value to know if its to be flipped or not

var text = document.getElementById(“arrow”);你正在引用一个id为'arrow'的元素。每次执行切换功能时,您将使用id“箭头”翻转元素。你可以做的是传递一个布尔值来知道它是否被翻转

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

and in your script

并在你的脚本中

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;";
      }
    }
}
}

for other elements, you can do

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

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

to prevent flip

防止翻转

#1