使用javascript显示/隐藏脚本 [英] Show/Hide script using javascript
问题描述
我有一个用于菜单的显示/隐藏脚本。当我点击一个主链接时,它会在其下面列出一个列表。我想知道是否有办法改变它,所以当我点击链接时它会打开,但当我点击下一个时,它会关闭另一个,而不是将它们全部打开,除非再次单击它以关闭。
I have a show/hide script that I am using for a menu. When I click a main link it brings up a list below it. I was wondering if there is a way to alter it a bit so that when I click the link it opens but when I click the next one it closes the other one instead of leaving them all open unless you click it again to close.
这是我的脚本:
Here is my script:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<a href="#" onclick="toggle_visibility('list1');">
<p>List One</p>
</a>
<div id="list1" style="display:none;">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
推荐答案
假设这是您的代码:
<a href="#" onclick="toggle_visibility('list1');">
<p>List One</p>
</a>
<div id="list1" style="display:none;">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
<a href="#" onclick="toggle_visibility('list2');">
<p>List Two</p>
</a>
<div id="list2" style="display:none;">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
更改为:
<a href="#" onclick="toggle_visibility('list1');">
<p>List One</p>
</a>
<div id="list1" class="alist" style="display:none;">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
<a href="#" onclick="toggle_visibility('list2');">
<p>List Two</p>
</a>
<div id="list2" class="alist" style="display:none;">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
并设置您的JavaScript:
And make your JavaScript this:
function toggle_visibility(id) {
var list = document.getElementsByClassName("alist");
for (var i = 0; i < list.length; i++) {
list[i].style.display = 'none';
}
var e = document.getElementById(id);
if(e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
以下是JSFiddle 。
为了避免使用普通的JavaScript,我建议您使用jQuery。
Instead of using plain JavaScript for this, I suggest you use jQuery.
下面是我如何在jQuery中实现它:
Here's how I would do it in jQuery:
function toggle_visibility(id) {
$(".list").hide();
$("#" + id).toggle();
}
这篇关于使用javascript显示/隐藏脚本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!