Javascript 切换 hide/unhide （需要多次使用代码但不起作用）

Question

我需要帮助更改此 javascript 代码，以便我可以在一个页面上多次使用它。它工作一次，但第二个打开第一个取消隐藏。为此，我只能使用 javascript。

<body>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
<a onclick="toggle_visibility('foo');"><b><span style="color: #0085cc;">TITLE GOES HERE<i class="fa fa-chevron-down" style="font-size:0.7em;"></i></span></b></a><div id="foo" style=display:none;>- Example<br>
- Example<br>
- Example<br>
- Example<br>
<a href="http://www.example.com/"><b><span style="color: #0085cc;">More</span></a></b></div>
</body>

Answer 1

关键是为 toggle_visibility() 设置正确的 ID 值，比如：

toggle_visibility('foo'); // Will toggle #foo element
toggle_visibility('bar'); // Will toggle #bar element

如果您有多个带有 toggle_visibility('foo') 的元素，它们都会 hide/unhide #foo 元素。

Answer 2

试试 $.toggle

http://api.jquery.com/toggle/

<html>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<body>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
$("#"+id).toggle(100);
}
//-->
</script>
<a onclick="toggle_visibility('foo');"><b><span style="color: #0085cc;">TITLE GOES HERE<i class="fa fa-chevron-down" style="font-size:0.7em;"></i></span></b></a><div id="foo" style=display:none;>- Example<br>
- Example<br>
- Example<br>
- Example<br>
<a href="http://www.example.com/"><b><span style="color: #0085cc;">More</span></a></b></div>
</body>
</html>

Javascript 切换 hide/unhide （需要多次使用代码但不起作用）

Javascript toggle hide/unhide (need to use code more than once but not working)

javascript

toggle